diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index a080149d501..6b95b07f31b 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -66,7 +66,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 00000000000..b9f5d736fd6 --- /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 = { + formPayload: 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 00000000000..e69172f9cd6 --- /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 { + formPayload: 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 531af895b24..a811b53d679 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 2d15a948e9e..3d391e14488 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, @@ -79,6 +81,10 @@ const useFormRepresentationStyles = makeStyles((theme) => ({ */ export const FormRepresentation = ({ editingContextId, representationId, readOnly }: RepresentationComponentProps) => { const classes = useFormRepresentationStyles(); + const [state, setState] = useState({ + payload: null, + }); + const [{ value, context }, dispatch] = useMachine( formRepresentationMachine, { @@ -107,18 +113,22 @@ export const FormRepresentation = ({ editingContextId, representationId, readOnl editingContextId, formId: representationId, }, - }, - fetchPolicy: 'no-cache', - onData: ({ data }) => { - const handleDataEvent: HandleSubscriptionResultEvent = { - type: 'HANDLE_SUBSCRIPTION_RESULT', - result: data, - }; - dispatch(handleDataEvent); - }, - onComplete: () => { - const completeEvent: HandleCompleteEvent = { type: 'HANDLE_COMPLETE' }; - dispatch(completeEvent); + fetchPolicy: 'no-cache', + onData: ({ data }) => { + const handleDataEvent: HandleSubscriptionResultEvent = { + type: 'HANDLE_SUBSCRIPTION_RESULT', + result: data, + }; + if (data.data) { + const { formEvent } = data.data; + setState((prevState) => ({ ...prevState, payload: formEvent })); + } + dispatch(handleDataEvent); + }, + onComplete: () => { + const completeEvent: HandleCompleteEvent = { type: 'HANDLE_COMPLETE' }; + dispatch(completeEvent); + }, }, }); @@ -171,12 +181,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 00000000000..eba02c09dc1 --- /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/forms/frontend/sirius-components-forms/src/views/FormBasedView.types.tsx b/packages/forms/frontend/sirius-components-forms/src/views/FormBasedView.types.tsx index 96e599c8efd..ffc1334f641 100644 --- a/packages/forms/frontend/sirius-components-forms/src/views/FormBasedView.types.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/views/FormBasedView.types.tsx @@ -11,7 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ import { WorkbenchViewComponentProps } from '@eclipse-sirius/sirius-components-core'; -import { GQLForm } from '../form/FormEventFragments.types'; +import { GQLForm, GQLPropertiesEventPayload } from '../form/FormEventFragments.types'; export interface FormBasedViewProps extends WorkbenchViewComponentProps { editingContextId: string; @@ -23,3 +23,7 @@ export interface FormBasedViewProps extends WorkbenchViewComponentProps { export interface FormConverter { convert(editingContextId: string, form: GQLForm): GQLForm; } + +export interface PropertiesRepresentationState { + payload: GQLPropertiesEventPayload | 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 21c7af699c0..12c2b7e4488 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/index.ts +++ b/packages/sirius-web/frontend/sirius-web-application/src/index.ts @@ -54,6 +54,8 @@ export { editProjectNavbarSubtitleExtensionPoint } from './views/edit-project/Ed 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 { DetailsContext } from './views/edit-project/workbench-views/DetailContext'; +export type { DetailsContextValue } from './views/edit-project/workbench-views/DetailsContext.types'; export { DetailsView } from './views/edit-project/workbench-views/DetailsView'; export { type CreateProjectAreaCardProps } from './views/project-browser/create-projects-area/CreateProjectArea.types'; export { createProjectAreaCardExtensionPoint } from './views/project-browser/create-projects-area/CreateProjectAreaExtensionPoints'; diff --git a/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailContext.ts b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailContext.ts new file mode 100644 index 00000000000..2daf59ca8b8 --- /dev/null +++ b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailContext.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 { DetailsContextValue } from './DetailsContext.types'; + +const value: DetailsContextValue = { + detailsPayload: null, +}; + +export const DetailsContext = React.createContext(value); diff --git a/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsContext.types.ts b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsContext.types.ts new file mode 100644 index 00000000000..79301c91d30 --- /dev/null +++ b/packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsContext.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 { GQLDetailsEventPayload } from './useDetailsViewSubscription.types'; + +export interface DetailsContextValue { + detailsPayload: GQLDetailsEventPayload | null; +} 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 058d66638dc..d15c9d0350e 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 @@ -15,6 +15,7 @@ import { FormBasedView } 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'; +import { DetailsContext } from './DetailContext'; import { DetailsViewState } from './DetailsView.types'; import { useDetailsViewSubscription } from './useDetailsViewSubscription'; @@ -52,7 +53,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 +64,12 @@ 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 6309bfb84ac..970198744e8 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 4a5c754631e..6a693c08c0b 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 {