From ca8343f77af9aba96d9c50208cb61a6a80b6728e Mon Sep 17 00:00:00 2001 From: mcharfadi Date: Wed, 24 Jul 2024 14:31:01 +0200 Subject: [PATCH] [3758] Store property and form payload in a context MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bug: https://github.com/eclipse-sirius/sirius-web/issues/3758 Signed-off-by: Michaël Charfadi --- CHANGELOG.adoc | 2 +- .../src/contexts/FormContext.ts | 20 +++++++++++++ .../src/contexts/FormContext.types.ts | 17 +++++++++++ .../sirius-components-forms/src/index.ts | 3 ++ .../representations/FormRepresentation.tsx | 28 ++++++++++++++----- .../FormRepresentation.types.ts | 18 ++++++++++++ .../sirius-web-application/src/index.ts | 3 ++ .../workbench-views/DetailContext.ts | 20 +++++++++++++ .../workbench-views/DetailsContext.types.ts | 17 +++++++++++ .../workbench-views/DetailsView.tsx | 14 ++++++++-- .../useDetailsViewSubscription.tsx | 3 ++ .../useDetailsViewSubscription.types.ts | 2 ++ 12 files changed, 137 insertions(+), 10 deletions(-) create mode 100644 packages/forms/frontend/sirius-components-forms/src/contexts/FormContext.ts create mode 100644 packages/forms/frontend/sirius-components-forms/src/contexts/FormContext.types.ts create mode 100644 packages/forms/frontend/sirius-components-forms/src/representations/FormRepresentation.types.ts create mode 100644 packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailContext.ts create mode 100644 packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/DetailsContext.types.ts diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index 8088b1a71f0..9f52ae7906e 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 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..02c33089bf5 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 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/sirius-web/frontend/sirius-web-application/src/index.ts b/packages/sirius-web/frontend/sirius-web-application/src/index.ts index 21c7af699c0..b44974b7874 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/index.ts +++ b/packages/sirius-web/frontend/sirius-web-application/src/index.ts @@ -54,7 +54,10 @@ 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 { 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/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..94ab248e1a3 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,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 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 {