[3634] Add apolloClientOptionsDocumentTransformConfigurersExtensionPoint

Bug: #3634
Signed-off-by: Michaël Charfadi <[email protected]>

CHANGELOG.adoc

@@ -25,6 +25,7 @@ More existing APIs will be migrated to this new common pattern.
  * `public Optional<IRepresentationEventProcessor> acquireRepresentationEventProcessor(IRepresentationConfiguration configuration, IInput input)`;
  * `Flux<IPayload> getSubscription(String editingContextId, IRepresentationConfiguration representationConfiguration, IInput input);`
  - https://github.com/eclipse-sirius/sirius-web/issues/3623[#3623] [form] Remove `IWidgetSubscriptionManagerFactory`
+ - https://github.com/eclipse-sirius/sirius-web/issues/3634[#3634] [sirius-web] Removes `GraphQLNodeStyleFragment` from `NodeTypeRegistry`, you can contribute additional payloads for custom nodes with the extension point `apolloClientOptionsDocumentTransformConfigurersExtensionPoint`
 
 === Dependency update
 
@@ -73,6 +74,7 @@ More existing APIs will be migrated to this new common pattern.
 This dialog presents diagram elements in a tree and allows to select them and update their visibility and status (e.g. hide, show, collapse).
 +
 image:doc/screenshots/diagramFilterView.png[Diagram Filter View, 70%]
+- https://github.com/eclipse-sirius/sirius-web/issues/3634[#3634] [sirius-web] Add an extension point to transform GraphQL documents
 
 === Improvements
 

packages/diagrams/frontend/sirius-components-diagrams/src/contexts/NodeContext.ts

@@ -16,7 +16,6 @@ import { NodeTypeContextValue } from './NodeContext.types';
 const value: NodeTypeContextValue = {
   nodeConverters: [],
   nodeLayoutHandlers: [],
-  graphQLNodeStyleFragments: [],
   nodeTypeContributions: [],
 };
 

packages/diagrams/frontend/sirius-components-diagrams/src/contexts/NodeContext.types.ts

@@ -12,7 +12,6 @@
  *******************************************************************************/
 import { NodeProps } from 'reactflow';
 import { INodeConverter } from '../converter/ConvertEngine.types';
-import { GraphQLNodeStyleFragment } from '../graphql/subscription/nodeFragment.types';
 import { NodeData } from '../renderer/DiagramRenderer.types';
 import { INodeLayoutHandler } from '../renderer/layout/LayoutEngine.types';
 
@@ -24,7 +23,6 @@ export interface NodeTypeContributionProps {
 export type NodeTypeContributionElement = React.ReactElement<NodeTypeContributionProps>;
 
 export interface NodeTypeContextValue {
-  graphQLNodeStyleFragments: GraphQLNodeStyleFragment[];
   nodeLayoutHandlers: INodeLayoutHandler<NodeData>[];
   nodeConverters: INodeConverter[];
   nodeTypeContributions: NodeTypeContributionElement[];

packages/diagrams/frontend/sirius-components-diagrams/src/graphql/subscription/diagramEventSubscription.ts

@@ -12,9 +12,8 @@
  *******************************************************************************/
 
 import { diagramFragment } from './diagramFragment';
-import { GraphQLNodeStyleFragment } from './nodeFragment.types';
 
-export const diagramEventSubscription = (contributions: GraphQLNodeStyleFragment[]) => `
+export const diagramEventSubscription = `
 subscription diagramEvent($input: DiagramEventInput!) {
   diagramEvent(input: $input) {
     ... on ErrorPayload {
@@ -35,5 +34,5 @@ subscription diagramEvent($input: DiagramEventInput!) {
   }
 }
 
-${diagramFragment(contributions)}
+${diagramFragment}
 `;

packages/diagrams/frontend/sirius-components-diagrams/src/graphql/subscription/diagramFragment.ts

@@ -14,9 +14,8 @@
 import { edgeFragment } from './edgeFragment';
 import { insideLabelFragment, labelFragment, outsideLabelFragment } from './labelFragment';
 import { nodeFragment } from './nodeFragment';
-import { GraphQLNodeStyleFragment } from './nodeFragment.types';
 
-export const diagramFragment = (contributions: GraphQLNodeStyleFragment[]) => `
+export const diagramFragment = `
 fragment diagramFragment on Diagram {
   id
   targetObjectId
@@ -73,7 +72,7 @@ fragment diagramFragment on Diagram {
   }
 }
 
-${nodeFragment(contributions)}
+${nodeFragment}
 ${edgeFragment}
 ${labelFragment}
 ${insideLabelFragment}

packages/diagrams/frontend/sirius-components-diagrams/src/graphql/subscription/nodeFragment.ts

@@ -10,9 +10,8 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { GraphQLNodeStyleFragment } from './nodeFragment.types';
 
-export const nodeFragment = (contributions: GraphQLNodeStyleFragment[]) => `
+export const nodeFragment = `
 fragment nodeFragment on Node {
   id
   type
@@ -48,14 +47,6 @@ fragment nodeFragment on Node {
     ... on IconLabelNodeStyle {
       background
     }
-     ${contributions.map(
-       (nodeStyle) =>
-         `
-    ... on ${nodeStyle.type} {
-      ${nodeStyle.fields}
-    }
-    `
-     )}
   }
   childrenLayoutStrategy {
     __typename

packages/diagrams/frontend/sirius-components-diagrams/src/graphql/subscription/nodeFragment.types.ts

@@ -91,8 +91,3 @@ export interface GQLImageNodeStyle extends GQLNodeStyle {
 export interface GQLIconLabelNodeStyle extends GQLNodeStyle {
   background: string;
 }
-
-export interface GraphQLNodeStyleFragment {
-  type: string;
-  fields: string;
-}

packages/diagrams/frontend/sirius-components-diagrams/src/index.ts

@@ -24,7 +24,7 @@ export type { GQLNodeDescription } from './graphql/query/nodeDescriptionFragment
 export type { GQLDiagram, GQLNodeLayoutData } from './graphql/subscription/diagramFragment.types';
 export type { GQLEdge } from './graphql/subscription/edgeFragment.types';
 export { GQLViewModifier } from './graphql/subscription/nodeFragment.types';
-export type { GQLNode, GQLNodeStyle, GraphQLNodeStyleFragment } from './graphql/subscription/nodeFragment.types';
+export type { GQLNode, GQLNodeStyle } from './graphql/subscription/nodeFragment.types';
 export { BorderNodePosition as BorderNodePosition } from './renderer/DiagramRenderer.types';
 export type { Diagram, NodeData } from './renderer/DiagramRenderer.types';
 export { Label } from './renderer/Label';

packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx

@@ -13,18 +13,15 @@
 
 import { gql, OnDataOptions, useQuery, useSubscription } from '@apollo/client';
 import { RepresentationComponentProps, useMultiToast } from '@eclipse-sirius/sirius-components-core';
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ReactFlowProvider } from 'reactflow';
 import { DiagramContext } from '../contexts/DiagramContext';
 import { DiagramDescriptionContext } from '../contexts/DiagramDescriptionContext';
-import { NodeTypeContext } from '../contexts/NodeContext';
-import { NodeTypeContextValue } from '../contexts/NodeContext.types';
 import { diagramEventSubscription } from '../graphql/subscription/diagramEventSubscription';
 import {
   GQLDiagramEventPayload,
   GQLDiagramRefreshedEventPayload,
 } from '../graphql/subscription/diagramEventSubscription.types';
-import { GraphQLNodeStyleFragment } from '../graphql/subscription/nodeFragment.types';
 import { ConnectorContextProvider } from '../renderer/connector/ConnectorContext';
 import { DiagramRenderer } from '../renderer/DiagramRenderer';
 import { DiagramDirectEditContextProvider } from '../renderer/direct-edit/DiagramDirectEditContext';
@@ -44,7 +41,7 @@ import {
 } from './DiagramRepresentation.types';
 import { StoreContextProvider } from './StoreContext';
 
-const subscription = (contributions: GraphQLNodeStyleFragment[]) => gql(diagramEventSubscription(contributions));
+const subscription = gql(diagramEventSubscription);
 
 export const getDiagramDescription = gql`
   query getDiagramDescription($editingContextId: ID!, $representationId: ID!) {
@@ -139,9 +136,7 @@ export const DiagramRepresentation = ({
     setState((prevState) => ({ ...prevState, diagramRefreshedEventPayload: null, complete: true }));
   };
 
-  const { graphQLNodeStyleFragments } = useContext<NodeTypeContextValue>(NodeTypeContext);
-
-  const { error } = useSubscription<GQLDiagramEventData>(subscription(graphQLNodeStyleFragments), {
+  const { error } = useSubscription<GQLDiagramEventData>(subscription, {
     variables,
     fetchPolicy: 'no-cache',
     onData,

packages/sirius-web/frontend/sirius-web-application/src/diagrams/DiagramRepresentationConfiguration.tsx

@@ -17,7 +17,6 @@ import { DiagramRepresentationConfigurationProps } from './DiagramRepresentation
 export const defaultNodeTypeRegistry: NodeTypeContextValue = {
   nodeConverters: [],
   nodeLayoutHandlers: [],
-  graphQLNodeStyleFragments: [],
   nodeTypeContributions: [],
 };
 

packages/sirius-web/frontend/sirius-web-application/src/diagrams/DiagramRepresentationConfiguration.types.ts

@@ -12,7 +12,6 @@
  *******************************************************************************/
 
 import {
-  GraphQLNodeStyleFragment,
   INodeConverter,
   INodeLayoutHandler,
   NodeData,
@@ -24,7 +23,6 @@ export interface DiagramRepresentationConfigurationProps {
 }
 
 export interface NodeTypeRegistry {
-  graphQLNodeStyleFragments: GraphQLNodeStyleFragment[];
   nodeLayoutHandlers: INodeLayoutHandler<NodeData>[];
   nodeConverters: INodeConverter[];
   nodeTypeContributions: NodeTypeContributionElement[];

packages/sirius-web/frontend/sirius-web-application/src/graphql/useCreateApolloClient.ts

@@ -15,6 +15,7 @@ import {
   ApolloClient,
   ApolloClientOptions,
   DefaultOptions,
+  DocumentTransform,
   HttpLink,
   HttpOptions,
   InMemoryCache,
@@ -34,6 +35,7 @@ import {
 } from '../views/project-browser/list-projects-area/useProjects.fragments';
 import {
   apolloClientOptionsConfigurersExtensionPoint,
+  apolloClientOptionsDocumentTransformConfigurersExtensionPoint,
   cacheOptionsConfigurersExtensionPoint,
   httpOptionsConfigurersExtensionPoint,
   webSocketOptionsConfigurersExtensionPoint,
@@ -102,12 +104,21 @@ export const useCreateApolloClient = (httpOrigin: string, wsOrigin: string): Apo
     },
   };
 
+  const { data: documentTransforms } = useData(apolloClientOptionsDocumentTransformConfigurersExtensionPoint);
+
+  const documentTransformToLoad = documentTransforms.reduce(
+    (documentTransforms: DocumentTransform, documentTransform: DocumentTransform) =>
+      documentTransforms.concat(documentTransform)
+  );
+
   let apolloClientOptions: ApolloClientOptions<NormalizedCacheObject> = {
     link,
     cache,
     connectToDevTools: true,
     defaultOptions,
+    documentTransform: documentTransformToLoad,
   };
+
   const { data: apolloClientOptionsConfigurers } = useData(apolloClientOptionsConfigurersExtensionPoint);
   apolloClientOptionsConfigurers.forEach((configurer) => {
     apolloClientOptions = configurer(apolloClientOptions);

packages/sirius-web/frontend/sirius-web-application/src/graphql/useCreateApolloClientExtensionPoints.tsx

@@ -11,6 +11,7 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
+import { DocumentTransform } from '@apollo/client';
 import { DataExtensionPoint } from '@eclipse-sirius/sirius-components-core';
 import {
   ApolloClientOptionsConfigurer,
@@ -38,3 +39,10 @@ export const apolloClientOptionsConfigurersExtensionPoint: DataExtensionPoint<Ar
   identifier: 'apolloClient#apolloClientOptionsConfigurers',
   fallback: [],
 };
+
+export const apolloClientOptionsDocumentTransformConfigurersExtensionPoint: DataExtensionPoint<
+  Array<DocumentTransform>
+> = {
+  identifier: 'apolloClient#apolloClientOptionsDocumenTransformConfigurers',
+  fallback: [],
+};

packages/sirius-web/frontend/sirius-web-application/src/index.ts

@@ -23,6 +23,7 @@ export {
 } from './graphql/useCreateApolloClient.types';
 export {
   apolloClientOptionsConfigurersExtensionPoint,
+  apolloClientOptionsDocumentTransformConfigurersExtensionPoint,
   cacheOptionsConfigurersExtensionPoint,
   httpOptionsConfigurersExtensionPoint,
   webSocketOptionsConfigurersExtensionPoint,

packages/sirius-web/frontend/sirius-web/src/index.tsx

@@ -11,14 +11,17 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { loadDevMessages, loadErrorMessages } from '@apollo/client/dev';
+import { ExtensionRegistry } from '@eclipse-sirius/sirius-components-core';
 import { NodeTypeContribution } from '@eclipse-sirius/sirius-components-diagrams';
 import {
   DiagramRepresentationConfiguration,
   NodeTypeRegistry,
   SiriusWebApplication,
+  apolloClientOptionsDocumentTransformConfigurersExtensionPoint,
 } from '@eclipse-sirius/sirius-web-application';
 import ReactDOM from 'react-dom';
 import { httpOrigin, wsOrigin } from './core/URL';
+import { ellipseNodeStyleDocumentTransform } from './nodes/ElipseNodeDocumentTransform';
 import { EllipseNode } from './nodes/EllipseNode';
 import { EllipseNodeConverter } from './nodes/EllipseNodeConverter';
 import { EllipseNodeLayoutHandler } from './nodes/EllipseNodeLayoutHandler';
@@ -34,20 +37,21 @@ if (process.env.NODE_ENV !== 'production') {
   loadErrorMessages();
 }
 
+const registry = new ExtensionRegistry();
+
+registry.putData(apolloClientOptionsDocumentTransformConfigurersExtensionPoint, {
+  identifier: `siriusWeb_${apolloClientOptionsDocumentTransformConfigurersExtensionPoint.identifier}`,
+  data: [ellipseNodeStyleDocumentTransform],
+});
+
 const nodeTypeRegistry: NodeTypeRegistry = {
-  graphQLNodeStyleFragments: [
-    {
-      type: 'EllipseNodeStyle',
-      fields: `borderColor borderSize borderStyle background`,
-    },
-  ],
   nodeLayoutHandlers: [new EllipseNodeLayoutHandler()],
   nodeConverters: [new EllipseNodeConverter()],
   nodeTypeContributions: [<NodeTypeContribution component={EllipseNode} type={'ellipseNode'} />],
 };
 
 ReactDOM.render(
-  <SiriusWebApplication httpOrigin={httpOrigin} wsOrigin={wsOrigin}>
+  <SiriusWebApplication httpOrigin={httpOrigin} wsOrigin={wsOrigin} extensionRegistry={registry}>
     <DiagramRepresentationConfiguration nodeTypeRegistry={nodeTypeRegistry} />
   </SiriusWebApplication>,
   document.getElementById('root')