fix: sync changes from v2 to v2-develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.59.0-rc.1",
+  "version": "2.59.1",
   "engines": {
     "node": "20.5.0"
   },

src/actionbar/ActionBarSeparator.tsx

@@ -0,0 +1,6 @@
+import { memo } from "react";
+
+export const ActionBarSeparator = memo(() => (
+  <div className="inline-block w-2" />
+));
+ActionBarSeparator.displayName = "ActionBarSeparator";

src/actionbar/ActionButton.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ButtonWithTooltip from "@/common/ButtonWithTooltip";
 import { LoadingOutlined } from "@ant-design/icons";
 import { ButtonProps } from "antd";

src/actionbar/DashboardActionBar.tsx

@@ -11,12 +11,8 @@ import {
   BorderOuterOutlined,
 } from "@ant-design/icons";
 import { useLocale } from "@gisce/react-formiga-components";
-import {
-  ActionViewContext,
-  ActionViewContextType,
-} from "@/context/ActionViewContext";
+import { ActionBarSeparator } from "./ActionBarSeparator";
 import { ShareUrlButton } from "./ShareUrlButton";
-import { ActionBarSeparator } from "./FormActionBar";
 
 function DashboardActionBar() {
   const { isLoading, dashboardRef, moveItemsEnabled, setMoveItemsEnabled } =

src/actionbar/FormActionBar.tsx

@@ -1,4 +1,4 @@
-import { useContext, useCallback } from "react";
+import { useContext, useCallback, memo, useMemo } from "react";
 import { Space, Spin } from "antd";
 import {
   SaveOutlined,
@@ -27,19 +27,17 @@ import {
   TabManagerContext,
   TabManagerContextType,
 } from "@/context/TabManagerContext";
-import {
-  ContentRootContext,
-  ContentRootContextType,
-} from "@/context/ContentRootContext";
 import AttachmentsButton from "./AttachmentsButton";
 import { Attachment } from "./AttachmentsButtonWrapper";
 import { useNextPrevious } from "./useNextPrevious";
+import {
+  saveDocument,
+  useFormToolbarButtons,
+} from "@/hooks/useFormToolbarButtons";
+import { ActionBarSeparator } from "./ActionBarSeparator";
 import { ShareUrlButton } from "./ShareUrlButton";
 
-function FormActionBar({ toolbar }: { toolbar: any }) {
-  const contentRootContext = useContext(
-    ContentRootContext,
-  ) as ContentRootContextType;
+function FormActionBarComponent({ toolbar }: { toolbar: any }) {
   const tabManagerContext = useContext(
     TabManagerContext,
   ) as TabManagerContextType;
@@ -74,11 +72,12 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
     isActive,
   } = useActionViewContext();
 
-  const { processAction } = contentRootContext || {};
-  const { openRelate, openDefaultActionForModel } = tabManagerContext || {};
+  const { openDefaultActionForModel } = tabManagerContext || {};
 
-  const mustDisableButtons =
-    formIsSaving || removingItem || formIsLoading || duplicatingItem;
+  const mustDisableButtons = useMemo(
+    () => formIsSaving || removingItem || formIsLoading || duplicatingItem,
+    [formIsSaving, removingItem, formIsLoading, duplicatingItem],
+  );
 
   const tryAction = useCallback(
     (action: () => void) => {
@@ -91,6 +90,18 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
     [formHasChanges, t],
   );
 
+  const handleRefresh = useCallback(() => {
+    tryAction(() => (formRef.current as any).fetchValues());
+  }, [tryAction, formRef]);
+
+  const { actionButtonProps, printButtonProps, relateButtonProps } =
+    useFormToolbarButtons({
+      toolbar,
+      mustDisableButtons,
+      formRef,
+      onRefreshParentValues: handleRefresh,
+    });
+
   const handleRemove = useCallback(async () => {
     try {
       setRemovingItem?.(true);
@@ -148,17 +159,53 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
     }
   }, [currentId, currentModel, formRef, goToResourceId, setDuplicatingItem]);
 
-  const runAction = useCallback(
-    (actionData: any) => {
-      processAction?.({
-        actionData,
-        values: (formRef.current as any).getValues(),
-        fields: (formRef.current as any).getFields(),
-        context: (formRef.current as any).getContext(),
-        onRefreshParentValues: () => (formRef.current as any).fetchValues(),
+  const handleChangeView = useCallback(
+    (view: any) => {
+      setPreviousView?.(currentView);
+      setFormHasChanges?.(false);
+      setCurrentView?.(view);
+    },
+    [currentView, setPreviousView, setFormHasChanges, setCurrentView],
+  );
+
+  const handleAddNewAttachment = useCallback(async () => {
+    const result = await saveDocument({ onFormSave });
+    if (result.succeed) {
+      openDefaultActionForModel?.({
+        ...getAttachmentActionPayload(
+          currentModel as string,
+          result.currentId as number,
+        ),
+        initialViewType: "form",
+      });
+    }
+  }, [currentModel, onFormSave, openDefaultActionForModel]);
+
+  const handleListAllAttachments = useCallback(async () => {
+    const result = await saveDocument({ onFormSave });
+    if (result.succeed) {
+      openDefaultActionForModel?.({
+        ...getAttachmentActionPayload(
+          currentModel as string,
+          result.currentId as number,
+        ),
+        initialViewType: "tree",
       });
+    }
+  }, [currentModel, onFormSave, openDefaultActionForModel]);
+
+  const handleViewAttachmentDetails = useCallback(
+    async (attachment: Attachment) => {
+      const result = await saveDocument({ onFormSave });
+      if (result.succeed) {
+        openDefaultActionForModel?.({
+          model: "ir.attachment",
+          res_id: attachment.id,
+          initialViewType: "form",
+        });
+      }
     },
-    [formRef, processAction],
+    [onFormSave, openDefaultActionForModel],
   );
 
   useHotkeys(
@@ -267,151 +314,75 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
         icon={<ReloadOutlined />}
         tooltip={t("refresh")}
         disabled={mustDisableButtons || currentId === undefined}
-        onClick={() => tryAction(() => (formRef.current as any).fetchValues())}
+        onClick={handleRefresh}
       />
       <ActionBarSeparator />
       <ChangeViewButton
         currentView={currentView}
         previousView={previousView}
         availableViews={availableViews}
-        onChangeView={(view: any) => {
-          setPreviousView?.(currentView);
-          setFormHasChanges?.(false);
-          setCurrentView?.(view);
-        }}
+        onChangeView={handleChangeView}
         disabled={mustDisableButtons}
         formHasChanges={formHasChanges}
       />
       <ActionBarSeparator />
-      <Space>
-        <ActionButton
-          icon={<LeftOutlined />}
-          tooltip={t("previous")}
-          disabled={mustDisableButtons}
-          onClick={() => tryAction(onPreviousClick)}
-        />
-        <ActionButton
-          icon={<RightOutlined />}
-          tooltip={t("next")}
-          disabled={mustDisableButtons}
-          onClick={() => tryAction(onNextClick)}
-        />
-      </Space>
-      <ActionBarSeparator />
-      <DropdownButton
-        icon={<ThunderboltOutlined />}
-        placement="bottomRight"
-        disabled={mustDisableButtons}
-        onRetrieveData={async () => [
-          { label: t("actions"), items: toolbar?.action },
-        ]}
-        onItemClick={async (action: any) => {
-          if (action) {
-            const result = await saveDocument({ onFormSave });
-            if (result.succeed) runAction(action);
-          }
-        }}
-      />
-      <DropdownButton
-        icon={<PrinterOutlined />}
-        disabled={mustDisableButtons}
-        placement="bottomRight"
-        onRetrieveData={async () => [
-          { label: t("reports"), items: toolbar?.print },
-        ]}
-        onItemClick={async (report: any) => {
-          if (report) {
-            const result = await saveDocument({ onFormSave });
-            if (result.succeed) {
-              runAction({
-                ...report,
-                datas: {
-                  ...(report.datas || {}),
-                  ids: [result.currentId as number],
-                },
-              });
-            }
-          }
-        }}
-      />
-      <DropdownButton
-        icon={<EnterOutlined />}
-        disabled={mustDisableButtons}
-        placement="bottomRight"
-        onRetrieveData={async () => [
-          { label: t("related"), items: toolbar?.relate },
-        ]}
-        onItemClick={async (relate: any) => {
-          if (relate) {
-            const result = await saveDocument({ onFormSave });
-            if (result.succeed) {
-              openRelate({
-                relateData: relate,
-                values: (formRef.current as any).getValues(),
-                fields: (formRef.current as any).getFields(),
-                action_id: relate.id,
-                action_type: relate.type,
-              });
-            }
-          }
-        }}
+      <NavigationButtons
+        disabled={mustDisableButtons || false}
+        onPreviousClick={onPreviousClick}
+        onNextClick={onNextClick}
+        tryAction={tryAction}
       />
+      <ActionBarSeparator />
+      <DropdownButton icon={<ThunderboltOutlined />} {...actionButtonProps} />
+      <DropdownButton icon={<PrinterOutlined />} {...printButtonProps} />
+      <DropdownButton icon={<EnterOutlined />} {...relateButtonProps} />
       <AttachmentsButton
         disabled={mustDisableButtons}
         attachments={attachments}
-        onAddNewAttachment={async () => {
-          const result = await saveDocument({ onFormSave });
-          if (result.succeed) {
-            openDefaultActionForModel({
-              ...getAttachmentActionPayload(
-                currentModel as string,
-                result.currentId as number,
-              ),
-              initialViewType: "form",
-            });
-          }
-        }}
-        onListAllAttachments={async () => {
-          const result = await saveDocument({ onFormSave });
-          if (result.succeed) {
-            openDefaultActionForModel({
-              ...getAttachmentActionPayload(
-                currentModel as string,
-                result.currentId as number,
-              ),
-              initialViewType: "tree",
-            });
-          }
-        }}
-        onViewAttachmentDetails={async (attachment: Attachment) => {
-          const result = await saveDocument({ onFormSave });
-          if (result.succeed) {
-            openDefaultActionForModel({
-              model: "ir.attachment",
-              res_id: attachment.id,
-              initialViewType: "form",
-            });
-          }
-        }}
+        onAddNewAttachment={handleAddNewAttachment}
+        onListAllAttachments={handleListAllAttachments}
+        onViewAttachmentDetails={handleViewAttachmentDetails}
       />
       <ActionBarSeparator />
       <ShareUrlButton res_id={currentId} />
     </Space>
   );
 }
 
-export const ActionBarSeparator = () => <div className="inline-block w-2" />;
+const FormActionBar = memo(FormActionBarComponent);
 
-const saveDocument = async ({
-  onFormSave,
-}: {
-  onFormSave?: () => Promise<{ succeed: boolean; id: number }>;
-}): Promise<{ succeed: boolean; currentId?: number }> => {
-  const result = await onFormSave?.();
-  return result?.succeed
-    ? { succeed: true, currentId: result.id }
-    : { succeed: false, currentId: undefined };
-};
+const NavigationButtons = memo(
+  ({
+    disabled,
+    onPreviousClick,
+    onNextClick,
+    tryAction,
+  }: {
+    disabled: boolean;
+    onPreviousClick: () => void;
+    onNextClick: () => void;
+    tryAction: (action: () => void) => void;
+  }) => {
+    const { t } = useLocale();
+    return (
+      <Space>
+        <ActionButton
+          icon={<LeftOutlined />}
+          tooltip={t("previous")}
+          disabled={disabled}
+          onClick={() => tryAction(onPreviousClick)}
+        />
+        <ActionButton
+          icon={<RightOutlined />}
+          tooltip={t("next")}
+          disabled={disabled}
+          onClick={() => tryAction(onNextClick)}
+        />
+      </Space>
+    );
+  },
+);
+NavigationButtons.displayName = "NavigationButtons";
 
 const getAttachmentActionPayload = (res_model: string, res_id: number) => ({
   model: "ir.attachment",

src/actionbar/GraphActionBar.tsx

@@ -11,7 +11,7 @@ import ButtonWithBadge from "./ButtonWithBadge";
 import { ReloadOutlined, FilterOutlined } from "@ant-design/icons";
 import { View } from "@/types";
 import { ShareUrlButton } from "./ShareUrlButton";
-import { ActionBarSeparator } from "./FormActionBar";
+import { ActionBarSeparator } from "./ActionBarSeparator";
 
 function GraphActionBar({ refreshGraph }: { refreshGraph: () => void }) {
   const { t } = useLocale();