[3758] Store property and form payload in a context

Bug: #3758
Signed-off-by: Michaël Charfadi <[email protected]>

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
 

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<FormContextValue>(value);

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;
+}

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';

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<FormRepresentationState>({
+    payload: null,
+  });
+
   const [{ value, context }, dispatch] = useMachine<FormRepresentationContext, FormRepresentationEvent>(
     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 (
     <div data-representation-kind="form">
-      {content}
-      <Toast
-        message={message}
-        open={toast === 'visible'}
-        onClose={() => dispatch({ type: 'HIDE_TOAST' } as HideToastEvent)}
-      />
+      <FormContext.Provider
+        value={{
+          formPayload: state.payload,
+        }}>
+        {content}
+        <Toast
+          message={message}
+          open={toast === 'visible'}
+          onClose={() => dispatch({ type: 'HIDE_TOAST' } as HideToastEvent)}
+        />
+      </FormContext.Provider>
     </div>
   );
 };

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;
+}

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;
+}

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';

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<DetailsContextValue>(value);

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;
+}

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
       </div>
     );
   }
-  return <FormBasedView editingContextId={editingContextId} form={form} readOnly={readOnly} />;
+  return (
+    <DetailsContext.Provider
+      value={{
+        detailsPayload: payload,
+      }}>
+      <FormBasedView editingContextId={editingContextId} form={form} readOnly={readOnly} />
+    </DetailsContext.Provider>
+  );
 };

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,
   };
 };

packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/workbench-views/useDetailsViewSubscription.types.ts

@@ -16,13 +16,15 @@ import { GQLForm } from '@eclipse-sirius/sirius-components-forms';
 export interface UseDetailsViewSubscriptionValue {
   loading: boolean;
   form: GQLForm | null;
+  payload: GQLDetailsEventPayload | null;
   complete: boolean;
 }
 
 export interface UseDetailsViewSubscriptionState {
   id: string;
   form: GQLForm | null;
   complete: boolean;
+  payload: GQLDetailsEventPayload | null;
 }
 
 export interface GQLDetailsEventInput {