feat: LEAP-1356: Add custom button props (#6787)

Co-authored-by: Gondragos <[email protected]>
Co-authored-by: MihajloHoma <[email protected]>

Author: Gondragos

Diff for: web/libs/datamanager/src/components/Common/Table/TableRow/TableRow.jsx

@@ -61,7 +61,7 @@ export const TableRow = observer(({ data, even, style, wrapperStyle, onClick, st
 
   return (
     <div className={rowWrapperCN.mod(mods).toString()} style={wrapperStyle} onClick={(e) => onClick?.(data, e)}>
-      <div className={tableRowCN.toString()} style={style}>
+      <div className={tableRowCN.toString()} style={style} data-leave={true}>
         {columns.map((col) => {
           return <CellRenderer key={col.id} col={col} data={data} cellViews={cellViews} decoration={decoration} />;
         })}

Diff for: web/libs/datamanager/src/components/Common/Tabs/Tabs.jsx

@@ -61,7 +61,7 @@ export const Tabs = ({
             </Droppable>
           </DragDropContext>
           {allowedActions.add !== false && (
-            <Button className={tabsCN.elem("add").toString()} type="text" onClick={onAdd} icon={addIcon} />
+            <Button className={tabsCN.elem("add").toString()} type="text" onClick={onAdd} icon={addIcon} data-leave />
           )}
         </span>
         <span className={tabsCN.elem("extra").toString()}>{tabBarExtraContent}</span>
@@ -140,6 +140,7 @@ export const TabsItem = ({
           .toString()}
         onClick={() => switchTab?.(tab)}
         title={currentTitle}
+        data-leave
       >
         {renameMode ? (
           <Input

Diff for: web/libs/datamanager/src/components/Common/Tabs/TabsMenu.jsx

@@ -15,12 +15,14 @@ export const TabsMenu = ({ onClick, editable = true, closable = true, clonable =
         title: "Duplicate",
         enabled: !virtual && clonable,
         action: () => onClick("duplicate"),
+        willLeave: true,
       },
       {
         key: "save",
         title: "Save",
         enabled: virtual,
         action: () => onClick("save"),
+        willLeave: true,
       },
     ],
     [editable, closable, clonable, virtual],
@@ -32,7 +34,7 @@ export const TabsMenu = ({ onClick, editable = true, closable = true, clonable =
     <Menu size="medium" onClick={(e) => e.domEvent.stopPropagation()}>
       {items.map((item) =>
         item.enabled ? (
-          <Menu.Item key={item.key} onClick={item.action}>
+          <Menu.Item key={item.key} onClick={item.action} data-leave={item.willLeave}>
             {item.title}
           </Menu.Item>
         ) : null,
@@ -41,7 +43,9 @@ export const TabsMenu = ({ onClick, editable = true, closable = true, clonable =
       {closable ? (
         <>
           {showDivider && <Menu.Divider />}
-          <Menu.Item onClick={() => onClick("close")}>Close</Menu.Item>
+          <Menu.Item onClick={() => onClick("close")} data-leave>
+            Close
+          </Menu.Item>
         </>
       ) : null}
     </Menu>

Diff for: web/libs/editor/src/components/BottomBar/Controls.tsx

@@ -49,7 +49,13 @@ const ControlButton = observer(({ button, disabled, onClick }: ControlButtonProp
 
   return (
     <ButtonTooltip title={button.tooltip ?? ""}>
-      <Button aria-label={button.ariaLabel} disabled={button.disabled || disabled} look={look} onClick={onClick}>
+      <Button
+        {...button.props}
+        aria-label={button.ariaLabel}
+        disabled={button.disabled || disabled}
+        look={look}
+        onClick={onClick}
+      >
         {button.title}
       </Button>
     </ButtonTooltip>

Diff for: web/libs/editor/src/stores/CustomButton.ts

@@ -1,4 +1,4 @@
-import { applySnapshot, getSnapshot, type Instance, type SnapshotIn, types } from "mobx-state-tree";
+import { type Instance, type SnapshotIn, types } from "mobx-state-tree";
 import { guidGenerator } from "../utils/unique";
 
 export type CustomButtonType = Instance<typeof CustomButton>;
@@ -19,9 +19,14 @@ export const CustomButton = types
     tooltip: types.maybe(types.string),
     ariaLabel: types.maybe(types.string),
     disabled: types.maybe(types.boolean),
+    props: types.maybe(types.frozen()),
   })
   .actions((self) => ({
     updateState(newState: CustomButtonSnType) {
-      applySnapshot(self, Object.assign({}, getSnapshot(self), newState));
+      for (const key in newState) {
+        if (key in self) {
+          self[key] = newState[key];
+        }
+      }
     },
   }));