diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index 8088b1a71f..9f52ae7906 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -67,7 +67,7 @@ As a result, the following maven modules have been deleted: `sirius-web-sample-a === New Features - https://github.com/eclipse-sirius/sirius-web/issues/3748[#3748] [diagram] Store current diagram payload in `DiagramContext` - +- https://github.com/eclipse-sirius/sirius-web/issues/3758[#3578] [form] Store property and form payload in a context === Improvements diff --git a/packages/forms/frontend/sirius-components-forms/src/contexts/FormContext.ts b/packages/forms/frontend/sirius-components-forms/src/contexts/FormContext.ts new file mode 100644 index 0000000000..02eb5a821f --- /dev/null +++ b/packages/forms/frontend/sirius-components-forms/src/contexts/FormContext.ts @@ -0,0 +1,20 @@ +/******************************************************************************* + * 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 React from 'react'; +import { FormContextValue } from './FormContext.types'; + +const value: FormContextValue = { + payload: null, +}; + +export const FormContext = React.createContext(value); diff --git a/packages/forms/frontend/sirius-components-forms/src/contexts/FormContext.types.ts b/packages/forms/frontend/sirius-components-forms/src/contexts/FormContext.types.ts new file mode 100644 index 0000000000..7f558c8851 --- /dev/null +++ b/packages/forms/frontend/sirius-components-forms/src/contexts/FormContext.types.ts @@ -0,0 +1,17 @@ +/******************************************************************************* + * 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 { GQLFormEventPayload } from '../form/FormEventFragments.types'; + +export interface FormContextValue { + payload: GQLFormEventPayload | null; +} diff --git a/packages/forms/frontend/sirius-components-forms/src/index.ts b/packages/forms/frontend/sirius-components-forms/src/index.ts index 531af895b2..a811b53d67 100644 --- a/packages/forms/frontend/sirius-components-forms/src/index.ts +++ b/packages/forms/frontend/sirius-components-forms/src/index.ts @@ -10,6 +10,8 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ +export { FormContext } from './contexts/FormContext'; +export type { FormContextValue } from './contexts/FormContext.types'; export * from './form/Form.types'; export * from './form/FormEventFragments'; export type * from './form/FormEventFragments.types'; @@ -28,6 +30,7 @@ export * from './propertysections/ListPropertySection'; export type { ListStyleProps } from './propertysections/ListPropertySection.types'; export type { MultiSelectStyleProps } from './propertysections/MultiSelectPropertySection.types'; export * from './propertysections/PropertySectionLabel'; +export type { PropertySectionLabelDecoratorProps } from './propertysections/PropertySectionLabel.types'; export * from './propertysections/PropertySectionLabelExtensionPoints'; export type { RadioStyleProps } from './propertysections/RadioPropertySection.types'; export type { SelectStyleProps } from './propertysections/SelectPropertySection.types'; diff --git a/packages/forms/frontend/sirius-components-forms/src/representations/FormRepresentation.tsx b/packages/forms/frontend/sirius-components-forms/src/representations/FormRepresentation.tsx index 2d15a948e9..27d88605d7 100644 --- a/packages/forms/frontend/sirius-components-forms/src/representations/FormRepresentation.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/representations/FormRepresentation.tsx @@ -15,12 +15,14 @@ import { RepresentationComponentProps, Toast } from '@eclipse-sirius/sirius-comp import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; import { useMachine } from '@xstate/react'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; +import { FormContext } from '../contexts/FormContext'; import { Form } from '../form/Form'; import { formRefreshedEventPayloadFragment } from '../form/FormEventFragments'; import { GQLFormEventSubscription } from '../form/FormEventFragments.types'; import { Page } from '../pages/Page'; import { ToolbarAction } from '../toolbaraction/ToolbarAction'; +import { FormRepresentationState } from './FormRepresentation.types'; import { FormRepresentationContext, FormRepresentationEvent, @@ -89,6 +91,9 @@ export const FormRepresentation = ({ editingContextId, representationId, readOnl ); const { toast, formRepresentation } = value as SchemaValue; const { id, formId, form, message } = context; + const [state, setState] = useState({ + payload: null, + }); /** * Displays an other form if the selection indicates that we should display another properties view. @@ -110,6 +115,10 @@ export const FormRepresentation = ({ editingContextId, representationId, readOnl }, fetchPolicy: 'no-cache', onData: ({ data }) => { + if (data.data) { + const { formEvent } = data.data; + setState((prevState) => ({ ...prevState, payload: formEvent })); + } const handleDataEvent: HandleSubscriptionResultEvent = { type: 'HANDLE_SUBSCRIPTION_RESULT', result: data, @@ -171,12 +180,17 @@ export const FormRepresentation = ({ editingContextId, representationId, readOnl return (
- {content} - dispatch({ type: 'HIDE_TOAST' } as HideToastEvent)} - /> + + {content} + dispatch({ type: 'HIDE_TOAST' } as HideToastEvent)} + /> +
); }; diff --git a/packages/forms/frontend/sirius-components-forms/src/representations/FormRepresentation.types.ts b/packages/forms/frontend/sirius-components-forms/src/representations/FormRepresentation.types.ts new file mode 100644 index 0000000000..eba02c09dc --- /dev/null +++ b/packages/forms/frontend/sirius-components-forms/src/representations/FormRepresentation.types.ts @@ -0,0 +1,18 @@ +/******************************************************************************* + * 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 { GQLFormEventPayload } from '../form/FormEventFragments.types'; + +export interface FormRepresentationState { + payload: GQLFormEventPayload | null; +} diff --git a/packages/sirius-web/frontend/sirius-web-application/src/index.ts b/packages/sirius-web/frontend/sirius-web-application/src/index.ts index 21c7af699c..220f210028 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/index.ts +++ b/packages/sirius-web/frontend/sirius-web-application/src/index.ts @@ -55,6 +55,7 @@ export { useCurrentProject } from './views/edit-project/useCurrentProject'; export type { UseCurrentProjectValue } from './views/edit-project/useCurrentProject.types'; export type { GQLProject } from './views/edit-project/useProjectAndRepresentationMetadata.types'; export { DetailsView } from './views/edit-project/workbench-views/DetailsView'; +export type { GQLDetailsEventPayload } from './views/edit-project/workbench-views/useDetailsViewSubscription.types'; export { type CreateProjectAreaCardProps } from './views/project-browser/create-projects-area/CreateProjectArea.types'; export { createProjectAreaCardExtensionPoint } from './views/project-browser/create-projects-area/CreateProjectAreaExtensionPoints'; export { projectActionButtonMenuItemExtensionPoint } from './views/project-browser/list-projects-area/ProjectActionButtonExtensionPoints'; diff --git a/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsView.tsx b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsView.tsx index 058d66638d..30b970dab4 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsView.tsx +++ b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsView.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ import { useSelection, WorkbenchViewComponentProps } from '@eclipse-sirius/sirius-components-core'; -import { FormBasedView } from '@eclipse-sirius/sirius-components-forms'; +import { FormBasedView, FormContext } from '@eclipse-sirius/sirius-components-forms'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; import { useEffect, useState } from 'react'; @@ -52,7 +52,7 @@ export const DetailsView = ({ editingContextId, readOnly }: WorkbenchViewCompone const objectIds: string[] = state.currentSelection.entries.map((entry) => entry.id); const skip = objectIds.length === 0; - const { form } = useDetailsViewSubscription(editingContextId, objectIds, skip); + const { form, payload } = useDetailsViewSubscription(editingContextId, objectIds, skip); const classes = useDetailsViewStyles(); @@ -63,5 +63,14 @@ export const DetailsView = ({ editingContextId, readOnly }: WorkbenchViewCompone ); } - return ; + return ( +
+ + + +
+ ); }; diff --git a/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/useDetailsViewSubscription.tsx b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/useDetailsViewSubscription.tsx index 6309bfb84a..970198744e 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/useDetailsViewSubscription.tsx +++ b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/useDetailsViewSubscription.tsx @@ -49,6 +49,7 @@ export const useDetailsViewSubscription = ( id: crypto.randomUUID(), form: null, complete: false, + payload: null, }); const input: GQLDetailsEventInput = { @@ -63,6 +64,7 @@ export const useDetailsViewSubscription = ( const { data: gqlDetailsEventSubscription } = data; if (gqlDetailsEventSubscription) { const { detailsEvent: payload } = gqlDetailsEventSubscription; + setState((prevState) => ({ ...prevState, payload })); if (isFormRefreshedEventPayload(payload)) { const { form } = payload; setState((prevState) => ({ ...prevState, form })); @@ -93,6 +95,7 @@ export const useDetailsViewSubscription = ( return { loading, form: state.form, + payload: state.payload, complete: state.complete, }; }; diff --git a/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/useDetailsViewSubscription.types.ts b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/useDetailsViewSubscription.types.ts index 4a5c754631..6a693c08c0 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/useDetailsViewSubscription.types.ts +++ b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/useDetailsViewSubscription.types.ts @@ -16,6 +16,7 @@ import { GQLForm } from '@eclipse-sirius/sirius-components-forms'; export interface UseDetailsViewSubscriptionValue { loading: boolean; form: GQLForm | null; + payload: GQLDetailsEventPayload | null; complete: boolean; } @@ -23,6 +24,7 @@ export interface UseDetailsViewSubscriptionState { id: string; form: GQLForm | null; complete: boolean; + payload: GQLDetailsEventPayload | null; } export interface GQLDetailsEventInput {