feat: Added a conflict resolution dialog and a Conflicts view for easier management of conflicts (#2337)

packages/web/src/javascripts/Components/Popover/Utils/Rect.ts

@@ -95,25 +95,25 @@ export const getPositionedPopoverRect = (
   if (side === 'top' || side === 'bottom') {
     switch (align) {
       case 'start':
-        positionPopoverRect.x = buttonRect.left - finalOffset
+        positionPopoverRect.x = buttonRect.left
         break
       case 'center':
-        positionPopoverRect.x = buttonRect.left - width / 2 + buttonRect.width / 2 - finalOffset
+        positionPopoverRect.x = buttonRect.left - width / 2 + buttonRect.width / 2
         break
       case 'end':
-        positionPopoverRect.x = buttonRect.right - width + finalOffset
+        positionPopoverRect.x = buttonRect.right - width
         break
     }
   } else {
     switch (align) {
       case 'start':
-        positionPopoverRect.y = buttonRect.top - finalOffset
+        positionPopoverRect.y = buttonRect.top
         break
       case 'center':
-        positionPopoverRect.y = buttonRect.top - height / 2 + buttonRect.height / 2 - finalOffset
+        positionPopoverRect.y = buttonRect.top - height / 2 + buttonRect.height / 2
         break
       case 'end':
-        positionPopoverRect.y = buttonRect.bottom - height + finalOffset
+        positionPopoverRect.y = buttonRect.bottom - height
         break
     }
   }

packages/web/src/javascripts/Components/Popover/Utils/getAbsolutePositionedParent.tsx

@@ -0,0 +1,19 @@
+export function getAbsolutePositionedParent(element: HTMLElement | null): HTMLElement | null {
+  if (!element) {
+    return null
+  }
+
+  const parent = element.parentElement
+
+  if (!parent) {
+    return null
+  }
+
+  const position = window.getComputedStyle(parent).getPropertyValue('position')
+
+  if (position === 'absolute') {
+    return parent
+  }
+
+  return getAbsolutePositionedParent(parent)
+}

packages/web/src/javascripts/Components/Popover/Utils/getAdjustedStylesForNonPortal.ts

@@ -0,0 +1,26 @@
+import { PopoverCSSProperties } from '../GetPositionedPopoverStyles'
+import { getAbsolutePositionedParent } from './getAbsolutePositionedParent'
+
+export const getAdjustedStylesForNonPortalPopover = (popoverElement: HTMLElement, styles: PopoverCSSProperties) => {
+  const absoluteParent = getAbsolutePositionedParent(popoverElement)
+  const translateXProperty = styles?.['--translate-x']
+  const translateYProperty = styles?.['--translate-y']
+
+  const parsedTranslateX = translateXProperty ? parseInt(translateXProperty) : 0
+  const parsedTranslateY = translateYProperty ? parseInt(translateYProperty) : 0
+
+  if (!absoluteParent) {
+    return styles
+  }
+
+  const parentRect = absoluteParent.getBoundingClientRect()
+
+  const adjustedTranslateX = parsedTranslateX - parentRect.left
+  const adjustedTranslateY = parsedTranslateY - parentRect.top
+
+  return {
+    ...styles,
+    '--translate-x': `${adjustedTranslateX}px`,
+    '--translate-y': `${adjustedTranslateY}px`,
+  } as PopoverCSSProperties
+}

packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts

@@ -6,6 +6,7 @@ type Options = {
   togglePopover?: () => void
   childPopovers: Set<string>
   disabled?: boolean
+  hideOnClickInModal?: boolean
 }
 
 export const usePopoverCloseOnClickOutside = ({
@@ -14,6 +15,7 @@ export const usePopoverCloseOnClickOutside = ({
   togglePopover,
   childPopovers,
   disabled,
+  hideOnClickInModal = false,
 }: Options) => {
   useEffect(() => {
     const closeIfClickedOutside = (event: MouseEvent) => {
@@ -26,7 +28,12 @@ export const usePopoverCloseOnClickOutside = ({
       const isPopoverInModal = popoverElement?.closest('[data-dialog]')
       const isDescendantOfModal = isPopoverInModal ? false : !!target.closest('[data-dialog]')
 
-      if (!isDescendantOfMenu && !isAnchorElement && !isDescendantOfChildPopover && !isDescendantOfModal) {
+      if (
+        !isDescendantOfMenu &&
+        !isAnchorElement &&
+        !isDescendantOfChildPopover &&
+        (!isDescendantOfModal || (isDescendantOfModal && hideOnClickInModal))
+      ) {
         if (!disabled) {
           togglePopover?.()
         }
@@ -39,5 +46,5 @@ export const usePopoverCloseOnClickOutside = ({
       document.removeEventListener('click', closeIfClickedOutside, { capture: true })
       document.removeEventListener('contextmenu', closeIfClickedOutside, { capture: true })
     }
-  }, [anchorElement, childPopovers, popoverElement, togglePopover, disabled])
+  }, [anchorElement, childPopovers, popoverElement, togglePopover, disabled, hideOnClickInModal])
 }