Make openDataControlEditor synchronous

elastic · Jul 8, 2024 · 2ab0845 · 2ab0845
1 parent dbd3578
commit 2ab0845
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 83 deletions.
diff --git a/examples/controls_example/public/app/react_control_example.tsx b/examples/controls_example/public/app/react_control_example.tsx
@@ -291,23 +291,25 @@ export const ReactControlExample = ({
         {controlGroupApi && (
           <EuiFlexItem grow={false}>
             <EuiButton
-              onClick={async () => {
-                const { type: controlType, state: initialState } = await openDataControlEditor({
+              onClick={() => {
+                openDataControlEditor({
                   initialState: {
                     grow: DEFAULT_CONTROL_GROW,
                     width: DEFAULT_CONTROL_WIDTH,
                     dataViewId: dashboardApi.lastUsedDataViewId.getValue(),
                   },
+                  onSave: ({ type: controlType, state: initialState }) => {
+                    controlGroupApi.addNewPanel({
+                      panelType: controlType,
+                      initialState,
+                    });
+                  },
                   controlGroupApi,
                   services: {
                     core,
                     dataViews: dataViewsService,
                   },
                 });
-                controlGroupApi.addNewPanel({
-                  panelType: controlType,
-                  initialState,
-                });
               }}
               size="s"
             >

diff --git a/examples/controls_example/public/react_controls/data_controls/initialize_data_control.tsx b/examples/controls_example/public/react_controls/data_controls/initialize_data_control.tsx
@@ -124,10 +124,21 @@ export const initializeDataControl = <EditorState extends object = {}>(
     }, {} as DefaultDataControlState & EditorState);
 
     // open the editor to get the new state
-    const { type: newType, state: newState } = await openDataControlEditor<
-      DefaultDataControlState & EditorState
-    >({
+    openDataControlEditor<DefaultDataControlState & EditorState>({
       services,
+      onSave: ({ type: newType, state: newState }) => {
+        if (newType === controlType) {
+          // apply the changes from the new state via the state manager
+          (Object.keys(initialState) as Array<keyof DefaultDataControlState & EditorState>).forEach(
+            (key) => {
+              mergedStateManager[key].next(newState[key]);
+            }
+          );
+        } else {
+          // replace the control with a new one of the updated type
+          controlGroup.replacePanel(controlId, { panelType: newType, initialState });
+        }
+      },
       initialState: {
         ...initialState,
         controlType,
@@ -136,18 +147,6 @@ export const initializeDataControl = <EditorState extends object = {}>(
       },
       controlGroupApi: controlGroup,
     });
-
-    if (newType === controlType) {
-      // apply the changes from the new state via the state manager
-      (Object.keys(initialState) as Array<keyof DefaultDataControlState & EditorState>).forEach(
-        (key) => {
-          mergedStateManager[key].next(newState[key]);
-        }
-      );
-    } else {
-      // replace the control with a new one of the updated type
-      controlGroup.replacePanel(controlId, { panelType: newType, initialState });
-    }
   };
 
   const api: ControlApiInitialization<DataControlApi> = {

diff --git a/examples/controls_example/public/react_controls/data_controls/open_data_control_editor.tsx b/examples/controls_example/public/react_controls/data_controls/open_data_control_editor.tsx
@@ -27,84 +27,84 @@ export type DataControlEditorState = Omit<DefaultDataControlState, 'fieldName'>
   defaultPanelTitle?: string;
 };
 
-export const openDataControlEditor = async <
+export const openDataControlEditor = <
   State extends DataControlEditorState = DataControlEditorState
 >({
   initialState,
+  onSave,
   controlGroupApi,
   services,
 }: {
   initialState: State;
+  onSave: ({ type, state }: { type: string; state: State }) => void;
   controlGroupApi: ControlGroupApi;
   services: {
     core: CoreStart;
     dataViews: DataViewsPublicPluginStart;
   };
-}): Promise<{ type: string; state: State }> => {
-  return new Promise((resolve) => {
-    const closeOverlay = (overlayRef: OverlayRef) => {
-      if (apiHasParentApi(controlGroupApi) && tracksOverlays(controlGroupApi.parentApi)) {
-        controlGroupApi.parentApi.clearOverlays();
-      }
-      overlayRef.close();
-    };
-
-    const onCancel = (newState: State, overlay: OverlayRef) => {
-      if (deepEqual(initialState, newState)) {
-        closeOverlay(overlay);
-        return;
-      }
-      services.core.overlays
-        .openConfirm(
-          i18n.translate('controls.controlGroup.management.discard.sub', {
-            defaultMessage: `Changes that you've made to this control will be discarded, are you sure you want to continue?`,
-          }),
-          {
-            confirmButtonText: i18n.translate('controls.controlGroup.management.discard.confirm', {
-              defaultMessage: 'Discard changes',
-            }),
-            cancelButtonText: i18n.translate('controls.controlGroup.management.discard.cancel', {
-              defaultMessage: 'Cancel',
-            }),
-            title: i18n.translate('controls.controlGroup.management.discard.title', {
-              defaultMessage: 'Discard changes?',
-            }),
-            buttonColor: 'danger',
-          }
-        )
-        .then((confirmed) => {
-          if (confirmed) {
-            closeOverlay(overlay);
-          }
-        });
-    };
+}): void => {
+  const closeOverlay = (overlayRef: OverlayRef) => {
+    if (apiHasParentApi(controlGroupApi) && tracksOverlays(controlGroupApi.parentApi)) {
+      controlGroupApi.parentApi.clearOverlays();
+    }
+    overlayRef.close();
+  };
 
-    const overlay = services.core.overlays.openFlyout(
-      toMountPoint(
-        <DataControlEditor<State>
-          parentApi={controlGroupApi}
-          initialState={initialState}
-          onCancel={(state) => {
-            onCancel(state, overlay);
-          }}
-          onSave={(state, selectedControlType) => {
-            closeOverlay(overlay);
-            resolve({ type: selectedControlType, state });
-          }}
-          services={{ dataViews: services.dataViews }}
-        />,
+  const onCancel = (newState: State, overlay: OverlayRef) => {
+    if (deepEqual(initialState, newState)) {
+      closeOverlay(overlay);
+      return;
+    }
+    services.core.overlays
+      .openConfirm(
+        i18n.translate('controls.controlGroup.management.discard.sub', {
+          defaultMessage: `Changes that you've made to this control will be discarded, are you sure you want to continue?`,
+        }),
         {
-          theme: services.core.theme,
-          i18n: services.core.i18n,
+          confirmButtonText: i18n.translate('controls.controlGroup.management.discard.confirm', {
+            defaultMessage: 'Discard changes',
+          }),
+          cancelButtonText: i18n.translate('controls.controlGroup.management.discard.cancel', {
+            defaultMessage: 'Cancel',
+          }),
+          title: i18n.translate('controls.controlGroup.management.discard.title', {
+            defaultMessage: 'Discard changes?',
+          }),
+          buttonColor: 'danger',
         }
-      ),
+      )
+      .then((confirmed) => {
+        if (confirmed) {
+          closeOverlay(overlay);
+        }
+      });
+  };
+
+  const overlay = services.core.overlays.openFlyout(
+    toMountPoint(
+      <DataControlEditor<State>
+        parentApi={controlGroupApi}
+        initialState={initialState}
+        onCancel={(state) => {
+          onCancel(state, overlay);
+        }}
+        onSave={(state, selectedControlType) => {
+          closeOverlay(overlay);
+          onSave({ type: selectedControlType, state });
+        }}
+        services={{ dataViews: services.dataViews }}
+      />,
       {
-        onClose: () => closeOverlay(overlay),
+        theme: services.core.theme,
+        i18n: services.core.i18n,
       }
-    );
-
-    if (apiHasParentApi(controlGroupApi) && tracksOverlays(controlGroupApi.parentApi)) {
-      controlGroupApi.parentApi.openOverlay(overlay);
+    ),
+    {
+      onClose: () => closeOverlay(overlay),
     }
-  });
+  );
+
+  if (apiHasParentApi(controlGroupApi) && tracksOverlays(controlGroupApi.parentApi)) {
+    controlGroupApi.parentApi.openOverlay(overlay);
+  }
 };