[292] Make the workbench reusable

Bug: #292
Signed-off-by: Stéphane Bégaudeau <stephane.begaudeau@obeo.fr>

frontend/src/diagram/DiagramWebSocketContainer.tsx

@@ -227,7 +227,6 @@ export const DiagramWebSocketContainer = ({
   readOnly,
   selection,
   setSelection,
-  setSubscribers,
 }: DiagramWebSocketContainerProps) => {
   const diagramDomElement = useRef(null);
 
@@ -477,14 +476,6 @@ export const DiagramWebSocketContainer = ({
     dispatch({ type: HANDLE_ERROR__ACTION, message: error });
   }
 
-  /**
-   * Each time the list of subscribers is updated, this will trigger the listener used to display the
-   * subscribers outside of this component.
-   */
-  useEffect(() => {
-    setSubscribers(subscribers);
-  }, [setSubscribers, subscribers]);
-
   const onZoomIn = () => {
     if (diagramServer) {
       diagramServer.actionDispatcher.dispatch({ kind: ZOOM_IN_ACTION });
@@ -610,6 +601,7 @@ export const DiagramWebSocketContainer = ({
         onFitToScreen={onFitToScreen}
         setZoomLevel={setZoomLevel}
         zoomLevel={zoomLevel}
+        subscribers={subscribers}
       />
       {content}
     </div>

frontend/src/diagram/DiagramWebSocketContainer.types.ts

@@ -10,13 +10,16 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Selection, Subscriber } from 'views/edit-project/EditProjectView.types';
+import { Selection } from 'workbench/Workbench.types';
 
 export type DiagramWebSocketContainerProps = {
   projectId: string;
   representationId: string;
   readOnly: boolean;
   selection: Selection;
   setSelection: (newSelection: Selection) => void;
-  setSubscribers: (newSubscribers: Subscriber[]) => void;
+};
+
+export type Subscriber = {
+  username: string;
 };

frontend/src/diagram/Toolbar.tsx

@@ -10,37 +10,65 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { IconButton } from 'core/button/Button';
-import { Select } from 'core/select/Select';
-import { FitToScreen, Share, ZoomIn, ZoomOut } from 'icons';
+import Avatar from '@material-ui/core/Avatar';
+import FormControl from '@material-ui/core/FormControl';
+import IconButton from '@material-ui/core/IconButton';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import { makeStyles } from '@material-ui/core/styles';
+import Tooltip from '@material-ui/core/Tooltip';
+import AspectRatioIcon from '@material-ui/icons/AspectRatio';
+import ShareIcon from '@material-ui/icons/Share';
+import ZoomInIcon from '@material-ui/icons/ZoomIn';
+import ZoomOutIcon from '@material-ui/icons/ZoomOut';
 import { ShareDiagramModal } from 'modals/share-diagram/ShareDiagramModal';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
-import styles from './Toolbar.module.css';
-
-const zooms = [
-  { id: '4', label: '400%' },
-  { id: '2', label: '200%' },
-  { id: '1.75', label: '175%' },
-  { id: '1.5', label: '150%' },
-  { id: '1.25', label: '125%' },
-  { id: '1', label: '100%' },
-  { id: '0.75', label: '75%' },
-  { id: '0.5', label: '50%' },
-  { id: '0.25', label: '25%' },
-  { id: '0.1', label: '10%' },
-  { id: '0.05', label: '5%' },
-];
 
 const propTypes = {
   onZoomIn: PropTypes.func.isRequired,
   onZoomOut: PropTypes.func.isRequired,
   onFitToScreen: PropTypes.func.isRequired,
   setZoomLevel: PropTypes.func.isRequired,
   zoomLevel: PropTypes.string,
+  subscribers: PropTypes.array.isRequired,
 };
-export const Toolbar = ({ onZoomIn, onZoomOut, onFitToScreen, setZoomLevel, zoomLevel }) => {
-  const [state, setState] = useState({ modal: undefined, currentZoomLevel: undefined });
+
+const useToolbarStyles = makeStyles((theme) => ({
+  toolbar: {
+    display: 'flex',
+    flexDirection: 'row',
+    height: theme.spacing(4),
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: theme.palette.divider,
+  },
+  selectFormControl: {
+    minWidth: 70,
+  },
+  subscribers: {
+    marginLeft: 'auto',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    '& > *': {
+      marginLeft: theme.spacing(0.5),
+      marginRight: theme.spacing(0.5),
+    },
+  },
+  avatar: {
+    fontSize: '1rem',
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+    backgroundColor: theme.palette.primary.main,
+  },
+}));
+
+export const Toolbar = ({ onZoomIn, onZoomOut, onFitToScreen, setZoomLevel, zoomLevel, subscribers }) => {
+  const classes = useToolbarStyles();
+  const [state, setState] = useState({ modal: undefined, currentZoomLevel: zoomLevel });
   const onShare = () => setState({ modal: 'ShareDiagramModal', currentZoomLevel: state.currentZoomLevel });
   const closeModal = () => setState({ modal: undefined, currentZoomLevel: state.currentZoomLevel });
 
@@ -62,28 +90,52 @@ export const Toolbar = ({ onZoomIn, onZoomOut, onFitToScreen, setZoomLevel, zoom
   }
   return (
     <>
-      <div className={styles.toolbar}>
-        <IconButton className={styles.icon} onClick={onShare} data-testid="share">
-          <Share title="Share" />
+      <div className={classes.toolbar}>
+        <FormControl className={classes.selectFormControl}>
+          <Select
+            value={currentZoomLevel}
+            onChange={updateZoomLevel}
+            variant="standard"
+            disableUnderline
+            data-testid="zoom-level">
+            <MenuItem value={'4'}>400%</MenuItem>
+            <MenuItem value={'2'}>200%</MenuItem>
+            <MenuItem value={'1.75'}>175%</MenuItem>
+            <MenuItem value={'1.5'}>150%</MenuItem>
+            <MenuItem value={'1.25'}>125%</MenuItem>
+            <MenuItem value={'1'}>100%</MenuItem>
+            <MenuItem value={'0.75'}>75%</MenuItem>
+            <MenuItem value={'0.5'}>50%</MenuItem>
+            <MenuItem value={'0.25'}>25%</MenuItem>
+            <MenuItem value={'0.1'}>10%</MenuItem>
+            <MenuItem value={'0.05'}>5%</MenuItem>
+          </Select>
+        </FormControl>
+        <IconButton size="small" color="inherit" aria-label="zoom in" onClick={onZoomIn} data-testid="zoom-in">
+          <ZoomInIcon fontSize="small" />
         </IconButton>
-        <div className={styles.separator} />
-        <IconButton className={styles.icon} onClick={onZoomIn} data-testid="zoom-in">
-          <ZoomIn />
+        <IconButton size="small" color="inherit" aria-label="zoom out" onClick={onZoomOut} data-testid="zoom-out">
+          <ZoomOutIcon fontSize="small" />
         </IconButton>
-        <IconButton className={styles.icon} onClick={onZoomOut} data-testid="zoom-out">
-          <ZoomOut />
+        <IconButton
+          size="small"
+          color="inherit"
+          aria-label="fit to screen"
+          onClick={onFitToScreen}
+          data-testid="fit-to-screen">
+          <AspectRatioIcon fontSize="small" />
         </IconButton>
-        <IconButton className={styles.icon} onClick={onFitToScreen} data-testid="fit-to-screen">
-          <FitToScreen title="Fit to screen" />
+        <IconButton size="small" color="inherit" aria-label="share" onClick={onShare} data-testid="share">
+          <ShareIcon fontSize="small" />
         </IconButton>
-        <Select
-          name="zoom level"
-          value={currentZoomLevel}
-          options={zooms}
-          onChange={updateZoomLevel}
-          small={true}
-          data-testid="zoom-level"
-        />
+
+        <div className={classes.subscribers}>
+          {subscribers.map((subscriber) => (
+            <Tooltip title={subscriber.username} arrow key={subscriber.username}>
+              <Avatar classes={{ root: classes.avatar }}>{subscriber.username.substring(0, 1).toUpperCase()}</Avatar>
+            </Tooltip>
+          ))}
+        </div>
       </div>
       {modalElement}
     </>

frontend/src/diagram/reducer.ts

@@ -44,7 +44,7 @@ export const initialState = {
   contextualPalette: undefined,
   latestSelection: undefined,
   newSelection: undefined,
-  zoomLevel: undefined,
+  zoomLevel: '1',
   subscribers: [],
   message: undefined,
 };

frontend/src/index.ts

@@ -73,8 +73,6 @@ export * from './modals/new-root-object/NewRootObjectModal';
 export * from './modals/rename-project/RenameProjectModal';
 export * from './modals/share-diagram/ShareDiagramModal';
 export * from './modals/upload-document/UploadDocumentModal';
-export * from './navbar/EditProjectNavbar/EditProjectNavbar';
-export * from './navbar/EditProjectNavbarContextMenu';
 export * from './navbar/LoggedInNavbar';
 export * from './navbar/LoggedOutNavbar';
 export * from './navbar/Logo';
@@ -104,11 +102,8 @@ export * from './tree/Tree';
 export * from './tree/TreeItem';
 export * from './tree/TreeItemDiagramContextMenu';
 export * from './tree/TreeItemObjectContextMenu';
-export * from './views/edit-project/EditProjectLoadedView';
+export * from './views/edit-project/EditProjectNavbar/EditProjectNavbar';
 export * from './views/edit-project/EditProjectView';
-export * from './views/edit-project/OnboardArea';
-export * from './views/edit-project/RepresentationArea';
-export * from './views/edit-project/RepresentationNavigation';
 export * from './views/ErrorView';
 export * from './views/Footer';
 export * from './views/FormContainer';