-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[3943] Add support for the widget refeference in the vs-code extension
Bug: #3943 Signed-off-by: Michaël Charfadi <[email protected]>
- Loading branch information
1 parent
147c54e
commit fce12cb
Showing
5 changed files
with
325 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
vscode-extension/src/view/app/registry/DefaultExtensionRegistry.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| /******************************************************************************* | ||
| * Copyright (c) 2024 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 { ExtensionRegistry } from '@eclipse-sirius/sirius-components-core'; | ||
| import { | ||
| GQLWidget, | ||
| PropertySectionComponent, | ||
| widgetContributionExtensionPoint, | ||
| } from '@eclipse-sirius/sirius-components-forms'; | ||
| import { | ||
| GQLReferenceWidget, | ||
| ReferenceIcon, | ||
| ReferencePreview, | ||
| ReferencePropertySection, | ||
| } from '@eclipse-sirius/sirius-components-widget-reference'; | ||
| import React from 'react'; | ||
|
|
||
| const defaultExtensionRegistry = new ExtensionRegistry(); | ||
| /******************************************************************************* | ||
| * | ||
| * Custom widget | ||
| * | ||
| * Used to register new custom widget in form | ||
| * | ||
| *******************************************************************************/ | ||
|
|
||
| const isReferenceWidget = (widget: GQLWidget): widget is GQLReferenceWidget => widget.__typename === 'ReferenceWidget'; | ||
|
|
||
| defaultExtensionRegistry.putData(widgetContributionExtensionPoint, { | ||
| identifier: `siriusWeb_${widgetContributionExtensionPoint.identifier}_referenceWidget`, | ||
| data: [ | ||
| { | ||
| name: 'ReferenceWidget', | ||
| icon: <ReferenceIcon />, | ||
| previewComponent: ReferencePreview, | ||
| component: (widget: GQLWidget): PropertySectionComponent<GQLWidget> | null => { | ||
| let propertySectionComponent: PropertySectionComponent<GQLWidget> | null = null; | ||
|
|
||
| if (isReferenceWidget(widget)) { | ||
| propertySectionComponent = ReferencePropertySection; | ||
| } | ||
| return propertySectionComponent; | ||
| }, | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| export { defaultExtensionRegistry }; |
244 changes: 244 additions & 0 deletions
244
vscode-extension/src/view/app/registry/ReferenceWidgetDocumentTransform.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,244 @@ | ||
| /******************************************************************************* | ||
| * Copyright (c) 2024 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 { DocumentTransform } from '@apollo/client'; | ||
| import { DocumentNode, FieldNode, FragmentSpreadNode, InlineFragmentNode, Kind, SelectionNode, visit } from 'graphql'; | ||
|
|
||
| const shouldTransform = (document: DocumentNode) => { | ||
| return ( | ||
| document.definitions[0] && | ||
| document.definitions[0].kind === Kind.OPERATION_DEFINITION && | ||
| (document.definitions[0].name?.value === 'detailsEvent' || document.definitions[0].name?.value === 'formEvent') | ||
| ); | ||
| }; | ||
|
|
||
| const isWidgetFragment = (field: FieldNode) => { | ||
| if (field.selectionSet && (field.name.value === 'widgets' || field.name.value === 'children')) { | ||
| const fragmentSpreads = field.selectionSet.selections | ||
| .filter((selection: SelectionNode): selection is FragmentSpreadNode => selection.kind === Kind.FRAGMENT_SPREAD) | ||
| .map((fragmentSpread: FragmentSpreadNode) => fragmentSpread.name.value); | ||
| if (fragmentSpreads.includes('widgetFields')) { | ||
| return true; | ||
| } | ||
| } | ||
| return false; | ||
| }; | ||
|
|
||
| const labelField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'label', | ||
| }, | ||
| }; | ||
|
|
||
| const iconURLField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'iconURL', | ||
| }, | ||
| }; | ||
|
|
||
| const ownerIdField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'ownerId', | ||
| }, | ||
| }; | ||
|
|
||
| const descriptionIdField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'descriptionId', | ||
| }, | ||
| }; | ||
|
|
||
| const ownerKindField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'ownerKind', | ||
| }, | ||
| }; | ||
|
|
||
| const referenceKindField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'referenceKind', | ||
| }, | ||
| }; | ||
|
|
||
| const containmentField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'containment', | ||
| }, | ||
| }; | ||
|
|
||
| const manyValuedField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'manyValued', | ||
| }, | ||
| }; | ||
|
|
||
| const referenceField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'reference', | ||
| }, | ||
| selectionSet: { | ||
| kind: Kind.SELECTION_SET, | ||
| selections: [ownerKindField, referenceKindField, containmentField, manyValuedField], | ||
| }, | ||
| }; | ||
|
|
||
| const idField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'id', | ||
| }, | ||
| }; | ||
|
|
||
| const kindField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'kind', | ||
| }, | ||
| }; | ||
|
|
||
| const colorField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'color', | ||
| }, | ||
| }; | ||
|
|
||
| const fontSizeField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'fontSize', | ||
| }, | ||
| }; | ||
|
|
||
| const italicField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'italic', | ||
| }, | ||
| }; | ||
|
|
||
| const boldField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'bold', | ||
| }, | ||
| }; | ||
|
|
||
| const underlineField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'underline', | ||
| }, | ||
| }; | ||
|
|
||
| const strikeThroughField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'strikeThrough', | ||
| }, | ||
| }; | ||
|
|
||
| const referenceValuesField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'referenceValues', | ||
| }, | ||
| selectionSet: { | ||
| kind: Kind.SELECTION_SET, | ||
| selections: [idField, labelField, kindField, iconURLField], | ||
| }, | ||
| }; | ||
|
|
||
| const styleField: SelectionNode = { | ||
| kind: Kind.FIELD, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'style', | ||
| }, | ||
| selectionSet: { | ||
| kind: Kind.SELECTION_SET, | ||
| selections: [colorField, fontSizeField, italicField, boldField, underlineField, strikeThroughField], | ||
| }, | ||
| }; | ||
|
|
||
| export const referenceWidgetDocumentTransform = new DocumentTransform((document) => { | ||
| if (shouldTransform(document)) { | ||
| return visit(document, { | ||
| Field(field) { | ||
| if (!isWidgetFragment(field)) { | ||
| return undefined; | ||
| } | ||
| const selections = field.selectionSet?.selections ?? []; | ||
|
|
||
| const referenceWidgetInlineFragment: InlineFragmentNode = { | ||
| kind: Kind.INLINE_FRAGMENT, | ||
| selectionSet: { | ||
| kind: Kind.SELECTION_SET, | ||
| selections: [ | ||
| labelField, | ||
| iconURLField, | ||
| ownerIdField, | ||
| descriptionIdField, | ||
| referenceField, | ||
| referenceValuesField, | ||
| styleField, | ||
| ], | ||
| }, | ||
| typeCondition: { | ||
| kind: Kind.NAMED_TYPE, | ||
| name: { | ||
| kind: Kind.NAME, | ||
| value: 'ReferenceWidget', | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| return { | ||
| ...field, | ||
| selectionSet: { | ||
| ...field.selectionSet, | ||
| selections: [...selections, referenceWidgetInlineFragment], | ||
| }, | ||
| }; | ||
| }, | ||
| }); | ||
| } | ||
| return document; | ||
| }); |