[293] Lower the coupling between the workbench and the representations

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

frontend/src/diagram/DiagramWebSocketContainer.tsx

@@ -12,7 +12,6 @@
  *******************************************************************************/
 import { useLazyQuery, useMutation, useSubscription } from '@apollo/client';
 import { Text } from 'core/text/Text';
-import { DiagramWebSocketContainerProps } from 'diagram/DiagramWebSocketContainer.types';
 import {
   COMPLETE__STATE,
   HANDLE_COMPLETE__ACTION,
@@ -45,10 +44,10 @@ import {
   ZOOM_TO_ACTION,
 } from 'diagram/sprotty/WebSocketDiagramServer';
 import { Toolbar } from 'diagram/Toolbar';
-import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useReducer, useRef } from 'react';
 import 'reflect-metadata'; // Required because Sprotty uses Inversify and both frameworks are written in TypeScript with experimental features.
 import { EditLabelAction, FitToScreenAction, SEdge, SNode } from 'sprotty';
+import { RepresentationComponentProps } from 'workbench/Workbench.types';
 import styles from './Diagram.module.css';
 import {
   deleteFromDiagramMutation,
@@ -60,18 +59,6 @@ import {
 } from './operations';
 import { canInvokeTool } from './toolServices';
 
-const propTypes = {
-  projectId: PropTypes.string.isRequired,
-  representationId: PropTypes.string.isRequired,
-  readOnly: PropTypes.bool.isRequired,
-  selection: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired,
-    kind: PropTypes.string.isRequired,
-  }),
-  setSelection: PropTypes.func.isRequired,
-};
-
 /**
  * Here be dragons!
  *
@@ -221,12 +208,12 @@ const propTypes = {
  * @author sbegaudeau
  */
 export const DiagramWebSocketContainer = ({
-  projectId,
+  editingContextId,
   representationId,
   readOnly,
   selection,
   setSelection,
-}: DiagramWebSocketContainerProps) => {
+}: RepresentationComponentProps) => {
   const diagramDomElement = useRef(null);
 
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -316,15 +303,15 @@ export const DiagramWebSocketContainer = ({
       const nodeIds = diagramElements.filter((diagramElement) => diagramElement instanceof SNode).map((elt) => elt.id);
 
       const input = {
-        projectId,
+        projectId: editingContextId,
         representationId,
         nodeIds,
         edgeIds,
       };
       deleteElementsMutation({ variables: { input } });
       dispatch({ type: SET_CONTEXTUAL_PALETTE__ACTION, contextualPalette: undefined });
     },
-    [projectId, representationId, deleteElementsMutation]
+    [editingContextId, representationId, deleteElementsMutation]
   );
 
   const invokeTool = useCallback(
@@ -335,7 +322,7 @@ export const DiagramWebSocketContainer = ({
           const [diagramSourceElementId, diagramTargetElementId] = params;
 
           const input = {
-            projectId,
+            projectId: editingContextId,
             representationId,
             diagramSourceElementId,
             diagramTargetElementId,
@@ -347,7 +334,7 @@ export const DiagramWebSocketContainer = ({
           const [diagramElementId] = params;
 
           const input = {
-            projectId,
+            projectId: editingContextId,
             representationId,
             diagramElementId,
             toolId,
@@ -357,7 +344,7 @@ export const DiagramWebSocketContainer = ({
         dispatch({ type: SET_ACTIVE_TOOL__ACTION });
       }
     },
-    [projectId, representationId, invokeNodeToolMutation, invokeEdgeToolMutation]
+    [editingContextId, representationId, invokeNodeToolMutation, invokeEdgeToolMutation]
   );
 
   /**
@@ -405,7 +392,7 @@ export const DiagramWebSocketContainer = ({
     };
     const editLabel = (labelId, newText) => {
       const input = {
-        projectId,
+        projectId: editingContextId,
         representationId,
         labelId,
         newText,
@@ -442,7 +429,7 @@ export const DiagramWebSocketContainer = ({
     editLabelMutation,
     toolSections,
     selection,
-    projectId,
+    editingContextId,
     representationId,
     readOnly,
   ]);
@@ -461,7 +448,7 @@ export const DiagramWebSocketContainer = ({
   const { error } = useSubscription(diagramEventSubscription, {
     variables: {
       input: {
-        projectId,
+        projectId: editingContextId,
         diagramId: representationId,
       },
     },
@@ -606,4 +593,3 @@ export const DiagramWebSocketContainer = ({
     </div>
   );
 };
-DiagramWebSocketContainer.propTypes = propTypes;

frontend/src/diagram/DiagramWebSocketContainer.types.ts

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

frontend/src/form/FormWebSocketContainer.tsx

@@ -25,6 +25,7 @@ import { initialState, reducer } from 'form/reducer';
 import gql from 'graphql-tag';
 import { Properties } from 'properties/Properties';
 import React, { useEffect, useReducer } from 'react';
+import { RepresentationComponentProps } from 'workbench/Workbench.types';
 import styles from './FormWebSocketContainer.module.css';
 
 const formEventSubscription = gql`
@@ -108,18 +109,18 @@ const formEventSubscription = gql`
 /**
  * Connect the Form component to the GraphQL API over Web Socket.
  */
-export const FormWebSocketContainer = ({ projectId, formId }) => {
+export const FormWebSocketContainer = ({ editingContextId, representationId }: RepresentationComponentProps) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const { viewState, form, displayedFormId, subscribers, widgetSubscriptions, message } = state;
 
   /**
    * Displays an other form if the selection indicates that we should display another properties view.
    */
   useEffect(() => {
-    if (displayedFormId !== formId) {
-      dispatch({ type: SWITCH_FORM__ACTION, formId });
+    if (displayedFormId !== representationId) {
+      dispatch({ type: SWITCH_FORM__ACTION, formId: representationId });
     }
-  }, [formId, displayedFormId]);
+  }, [representationId, displayedFormId]);
 
   useEffect(() => {
     if (viewState === LOADING__STATE) {
@@ -130,8 +131,8 @@ export const FormWebSocketContainer = ({ projectId, formId }) => {
   const { error } = useSubscription(formEventSubscription, {
     variables: {
       input: {
-        projectId,
-        formId,
+        projectId: editingContextId,
+        formId: representationId,
       },
     },
     skip: viewState !== READY__STATE,
@@ -154,7 +155,7 @@ export const FormWebSocketContainer = ({ projectId, formId }) => {
   } else {
     view = (
       <Properties
-        projectId={projectId}
+        projectId={editingContextId}
         form={form}
         subscribers={subscribers}
         widgetSubscriptions={widgetSubscriptions}

frontend/src/index.ts

@@ -61,6 +61,7 @@ export * from './diagram/Toolbar';
 export * from './errors/ErrorBoundary';
 export * from './explorer/Explorer';
 export * from './explorer/ExplorerWebSocketContainer';
+export * from './form/FormWebSocketContainer';
 export * from './icons';
 export * from './modals/delete-document/DeleteDocumentModal';
 export * from './modals/delete-project/DeleteProjectModal';
@@ -120,3 +121,7 @@ export * from './views/projects/ProjectsView';
 export * from './views/projects/ProjectsViewContainer';
 export * from './views/upload-project/UploadProjectView';
 export * from './views/View';
+export * from './workbench/OnboardArea';
+export * from './workbench/RepresentationContext';
+export * from './workbench/RepresentationNavigation';
+export * from './workbench/Workbench';

frontend/src/workbench/RepresentationContext.ts

@@ -0,0 +1,33 @@
+/*******************************************************************************
+ * Copyright (c) 2021 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
+ *******************************************************************************/
+import { DiagramWebSocketContainer } from 'diagram/DiagramWebSocketContainer';
+import { FormWebSocketContainer } from 'form/FormWebSocketContainer';
+import React from 'react';
+import { RepresentationComponentRegistry } from 'workbench/RepresentationContext.types';
+import { RepresentationComponentProps } from './Workbench.types';
+
+const registry: RepresentationComponentRegistry = {
+  getComponent: (representation) => {
+    if (representation.kind === 'Diagram') {
+      return DiagramWebSocketContainer;
+    } else if (representation.kind === 'Form') {
+      return FormWebSocketContainer;
+    }
+    return (props: RepresentationComponentProps) => null;
+  },
+};
+
+const value = {
+  registry,
+};
+export const RepresentationContext = React.createContext(value);

frontend/src/workbench/RepresentationArea.module.css → frontend/src/workbench/RepresentationContext.types.ts

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2019, 2020 Obeo.
+ * Copyright (c) 2021 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
@@ -10,14 +10,8 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-.representationArea {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: min-content minmax(0, 1fr);
-}
+import { Representation, RepresentationComponent } from 'workbench/Workbench.types';
 
-.text {
-  font-size: var(--font-size-4);
-  color: var(--daintree);
-  font-weight: var(--font-weight-bold);
-}
+export type RepresentationComponentRegistry = {
+  getComponent: (representation: Representation) => RepresentationComponent | null;
+};