Skip to content

Commit be7521a

Browse files
mcharfadimcharfadi
committed
[6336] Move the retrieval of the connector tools in a dedicated hook
Bug: #6336 Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com>
1 parent 523f186 commit be7521a

File tree

5 files changed

+165
-93
lines changed

5 files changed

+165
-93
lines changed

‎CHANGELOG.adoc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ The new template for functional specification is located in `doc/iterations/YYYY
4545
The technical specifications will now rely on a new architectural decision record template located in `doc/adrs/adr.adoc`.
4646
This new template for ADRs will have several additional requirements compared to the previous one.
4747
It will require contributors to specify the persons involved in the decision process, to details the qualities expected of the solution, to list the various options considered, to clarify why a specific option has been selected, its advantages and drawbacks, which steps will be taken for the implementation among other things.
48+
- https://github.com/eclipse-sirius/sirius-web/issues/6336[#6336] [diagram] Move the retrieval of the connector tools in a dedicated hook.
4849

4950

5051

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/ConnectorContextualMenu.tsx‎

Lines changed: 6 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
* Obeo - initial API and implementation
1212
*******************************************************************************/
1313

14-
import { gql, useMutation, useQuery } from '@apollo/client';
14+
import { gql, useMutation } from '@apollo/client';
1515
import { IconOverlay, useMultiToast } from '@eclipse-sirius/sirius-components-core';
1616
import ListItemIcon from '@mui/material/ListItemIcon';
1717
import Menu from '@mui/material/Menu';
@@ -27,52 +27,18 @@ import { EdgeData, NodeData } from '../DiagramRenderer.types';
2727
import { isCursorNearCenterOfTheNode } from '../edge/EdgeLayout';
2828
import {
2929
ConnectorContextualMenuProps,
30-
GetConnectorToolsData,
31-
GetConnectorToolsVariables,
32-
GQLDiagramDescription,
3330
GQLErrorPayload,
3431
GQLInvokeSingleClickOnTwoDiagramElementsToolData,
3532
GQLInvokeSingleClickOnTwoDiagramElementsToolInput,
3633
GQLInvokeSingleClickOnTwoDiagramElementsToolPayload,
3734
GQLInvokeSingleClickOnTwoDiagramElementsToolSuccessPayload,
3835
GQLInvokeSingleClickOnTwoDiagramElementsToolVariables,
39-
GQLRepresentationDescription,
4036
GQLTool,
4137
GQLToolVariable,
4238
} from './ConnectorContextualMenu.types';
4339
import { useConnector } from './useConnector';
4440
import { GQLSingleClickOnTwoDiagramElementsTool } from './useConnector.types';
45-
46-
export const getConnectorToolsQuery = gql`
47-
query getConnectorTools(
48-
$editingContextId: ID!
49-
$representationId: ID!
50-
$sourceDiagramElementId: ID!
51-
$targetDiagramElementId: ID!
52-
) {
53-
viewer {
54-
editingContext(editingContextId: $editingContextId) {
55-
representation(representationId: $representationId) {
56-
description {
57-
... on DiagramDescription {
58-
connectorTools(
59-
sourceDiagramElementId: $sourceDiagramElementId
60-
targetDiagramElementId: $targetDiagramElementId
61-
) {
62-
id
63-
label
64-
iconURL
65-
... on SingleClickOnTwoDiagramElementsTool {
66-
dialogDescriptionId
67-
}
68-
}
69-
}
70-
}
71-
}
72-
}
73-
}
74-
}
75-
`;
41+
import { useConnectorPaletteContents } from './useConnectorPaletteContents';
7642

7743
export const invokeSingleClickOnTwoDiagramElementsToolMutation = gql`
7844
mutation invokeSingleClickOnTwoDiagramElementsTool($input: InvokeSingleClickOnTwoDiagramElementsToolInput!) {
@@ -100,10 +66,6 @@ export const invokeSingleClickOnTwoDiagramElementsToolMutation = gql`
10066
}
10167
`;
10268

103-
const isDiagramDescription = (
104-
representationDescription: GQLRepresentationDescription
105-
): representationDescription is GQLDiagramDescription => representationDescription.__typename === 'DiagramDescription';
106-
10769
const isErrorPayload = (payload: GQLInvokeSingleClickOnTwoDiagramElementsToolPayload): payload is GQLErrorPayload =>
10870
payload.__typename === 'ErrorPayload';
10971
const isSuccessPayload = (
@@ -136,16 +98,7 @@ const ConnectorContextualMenuComponent = memo(({}: ConnectorContextualMenuProps)
13698
const sourceDiagramElementId = connectionSource?.dataset.id ?? '';
13799
const targetDiagramElementId = connectionTarget?.dataset.id ?? '';
138100

139-
const variables: GetConnectorToolsVariables = {
140-
editingContextId,
141-
representationId: diagramId,
142-
sourceDiagramElementId,
143-
targetDiagramElementId,
144-
};
145-
const { loading, data, error } = useQuery<GetConnectorToolsData, GetConnectorToolsVariables>(getConnectorToolsQuery, {
146-
variables,
147-
skip: !connectionSource || !connectionTarget,
148-
});
101+
const { connectorTools, loading } = useConnectorPaletteContents(sourceDiagramElementId, targetDiagramElementId);
149102

150103
const invokeOpenSelectionDialog = (tool: GQLSingleClickOnTwoDiagramElementsTool) => {
151104
const onConfirm = (variables: GQLToolVariable[]) => {
@@ -168,12 +121,6 @@ const ConnectorContextualMenuComponent = memo(({}: ConnectorContextualMenuProps)
168121
}
169122
};
170123

171-
useEffect(() => {
172-
if (error) {
173-
addErrorMessage(error.message);
174-
}
175-
}, [error]);
176-
177124
const [
178125
invokeSingleClickOnTwoDiagramElementsTool,
179126
{
@@ -257,24 +204,17 @@ const ConnectorContextualMenuComponent = memo(({}: ConnectorContextualMenuProps)
257204
}
258205
}, [invokeSingleClickOnTwoDiagramElementToolData, invokeSingleClickOnTwoDiagramElementToolError]);
259206

260-
const connectorTools: GQLTool[] = [];
261-
const representationDescription: GQLRepresentationDescription | null | undefined =
262-
data?.viewer.editingContext?.representation?.description;
263-
if (representationDescription && isDiagramDescription(representationDescription)) {
264-
representationDescription.connectorTools.forEach((tool) => connectorTools.push(tool));
265-
}
266-
267207
useEffect(() => {
268208
if (connectorTools.length > 1) {
269209
addTempConnectionLine();
270210
}
271211
}, [connection, connectorTools.length]);
272212

273213
useEffect(() => {
274-
if (!loading && connection && data && connectorTools.length === 0) {
214+
if (!loading && connection && connectorTools.length === 0) {
275215
addMessages([{ body: 'No edge found between source and target selected', level: 'WARNING' }]);
276216
}
277-
}, [loading, data, connection, connectorTools.length]);
217+
}, [loading, connectorTools, connection, connectorTools.length]);
278218

279219
useEffect(() => {
280220
return () => removeTempConnectionLine();
@@ -286,7 +226,7 @@ const ConnectorContextualMenuComponent = memo(({}: ConnectorContextualMenuProps)
286226
}
287227
}, [connectorTools]);
288228

289-
if (!data || connectorTools.length <= 1) {
229+
if (!connectorTools || connectorTools.length <= 1) {
290230
return null;
291231
}
292232

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/ConnectorContextualMenu.types.ts‎

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ export interface ConnectorContextualMenuState {
2020
tool: GQLSingleClickOnTwoDiagramElementsTool | null;
2121
}
2222

23+
export interface GQLInvokeSingleClickOnTwoDiagramElementsToolVariables {
24+
input: GQLInvokeSingleClickOnTwoDiagramElementsToolInput;
25+
}
26+
2327
export interface GetConnectorToolsVariables {
2428
editingContextId: string;
2529
representationId: string;
@@ -42,33 +46,6 @@ export interface GQLToolVariable {
4246

4347
export type GQLToolVariableType = 'STRING' | 'OBJECT_ID' | 'OBJECT_ID_ARRAY';
4448

45-
export interface GetConnectorToolsData {
46-
viewer: GQLViewer;
47-
}
48-
49-
export interface GQLViewer {
50-
editingContext: GQLEditingContext | null;
51-
}
52-
53-
export interface GQLEditingContext {
54-
representation: GQLRepresentationMetadata | null;
55-
}
56-
57-
export interface GQLRepresentationMetadata {
58-
description: GQLRepresentationDescription;
59-
}
60-
61-
export interface GQLRepresentationDescription {
62-
__typename: string;
63-
}
64-
65-
export interface GQLDiagramDescription extends GQLRepresentationDescription {
66-
connectorTools: GQLTool[];
67-
}
68-
69-
export interface GQLInvokeSingleClickOnTwoDiagramElementsToolVariables {
70-
input: GQLInvokeSingleClickOnTwoDiagramElementsToolInput;
71-
}
7249
export interface GQLInvokeSingleClickOnTwoDiagramElementsToolInput {
7350
id: string;
7451
editingContextId: string;

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/useConnectorPaletteContents.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/*******************************************************************************
2+
* Copyright (c) 2026 Obeo.
3+
* This program and the accompanying materials
4+
* are made available under the terms of the Eclipse Public License v2.0
5+
* which accompanies this distribution, and is available at
6+
* https://www.eclipse.org/legal/epl-2.0/
7+
*
8+
* SPDX-License-Identifier: EPL-2.0
9+
*
10+
* Contributors:
11+
* Obeo - initial API and implementation
12+
*******************************************************************************/
13+
14+
import { gql, useQuery } from '@apollo/client';
15+
import { useContext, useEffect } from 'react';
16+
17+
import { useMultiToast } from '@eclipse-sirius/sirius-components-core';
18+
import { DiagramContext } from '../../contexts/DiagramContext';
19+
import { DiagramContextValue } from '../../contexts/DiagramContext.types';
20+
import {
21+
GetConnectorToolsData,
22+
GetConnectorToolsVariables,
23+
GQLDiagramDescription,
24+
GQLRepresentationDescription,
25+
GQLTool,
26+
UseConnectorPaletteContentValue,
27+
} from './useConnectorPaletteContents.types';
28+
29+
export const getConnectorToolsQuery = gql`
30+
query getConnectorTools(
31+
$editingContextId: ID!
32+
$representationId: ID!
33+
$sourceDiagramElementId: ID!
34+
$targetDiagramElementId: ID!
35+
) {
36+
viewer {
37+
editingContext(editingContextId: $editingContextId) {
38+
representation(representationId: $representationId) {
39+
description {
40+
... on DiagramDescription {
41+
connectorTools(
42+
sourceDiagramElementId: $sourceDiagramElementId
43+
targetDiagramElementId: $targetDiagramElementId
44+
) {
45+
id
46+
label
47+
iconURL
48+
... on SingleClickOnTwoDiagramElementsTool {
49+
dialogDescriptionId
50+
}
51+
}
52+
}
53+
}
54+
}
55+
}
56+
}
57+
}
58+
`;
59+
60+
const isDiagramDescription = (
61+
representationDescription: GQLRepresentationDescription
62+
): representationDescription is GQLDiagramDescription => representationDescription.__typename === 'DiagramDescription';
63+
64+
export const useConnectorPaletteContents = (
65+
sourceDiagramElementId: string,
66+
targetDiagramElementId: string
67+
): UseConnectorPaletteContentValue => {
68+
const { diagramId, editingContextId } = useContext<DiagramContextValue>(DiagramContext);
69+
const { addErrorMessage } = useMultiToast();
70+
71+
const {
72+
data,
73+
loading,
74+
error: paletteError,
75+
} = useQuery<GetConnectorToolsData, GetConnectorToolsVariables>(getConnectorToolsQuery, {
76+
variables: {
77+
editingContextId,
78+
representationId: diagramId,
79+
sourceDiagramElementId,
80+
targetDiagramElementId,
81+
},
82+
83+
skip: !sourceDiagramElementId && !targetDiagramElementId,
84+
});
85+
86+
const description: GQLRepresentationDescription | undefined =
87+
data?.viewer.editingContext?.representation?.description;
88+
89+
const connectorTools: GQLTool[] | null =
90+
description && isDiagramDescription(description) ? description.connectorTools : [];
91+
92+
useEffect(() => {
93+
if (paletteError) {
94+
addErrorMessage('An unexpected error has occurred, please refresh the page');
95+
}
96+
}, [paletteError]);
97+
98+
return { connectorTools, loading };
99+
};

‎packages/diagrams/frontend/sirius-components-diagrams/src/renderer/connector/useConnectorPaletteContents.types.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/*******************************************************************************
2+
* Copyright (c) 2026 Obeo.
3+
* This program and the accompanying materials
4+
* are made available under the terms of the Eclipse Public License v2.0
5+
* which accompanies this distribution, and is available at
6+
* https://www.eclipse.org/legal/epl-2.0/
7+
*
8+
* SPDX-License-Identifier: EPL-2.0
9+
*
10+
* Contributors:
11+
* Obeo - initial API and implementation
12+
*******************************************************************************/
13+
14+
export interface GetConnectorToolsVariables {
15+
editingContextId: string;
16+
representationId: string;
17+
sourceDiagramElementId: string;
18+
targetDiagramElementId: string;
19+
}
20+
21+
export interface UseConnectorPaletteContentValue {
22+
connectorTools: GQLTool[];
23+
loading: boolean;
24+
}
25+
26+
export interface GetConnectorToolsData {
27+
viewer: GQLViewer;
28+
}
29+
30+
export interface GQLViewer {
31+
editingContext: GQLEditingContext | null;
32+
}
33+
34+
export interface GQLEditingContext {
35+
representation: GQLRepresentationMetadata | null;
36+
}
37+
38+
export interface GQLRepresentationMetadata {
39+
description: GQLRepresentationDescription;
40+
}
41+
42+
export interface GQLRepresentationDescription {
43+
__typename: string;
44+
}
45+
46+
export interface GQLDiagramDescription extends GQLRepresentationDescription {
47+
connectorTools: GQLTool[];
48+
}
49+
50+
export interface GQLTool {
51+
id: string;
52+
label: string;
53+
iconURL: string[];
54+
__typename: string;
55+
}

0 commit comments

Comments
 (0)