From a6b973c7127d5d4745277ae098de149befcdc8db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= <michal.skalka@swmansion.com>
Date: Wed, 2 Aug 2023 11:53:59 +0200
Subject: [PATCH 1/7] fixed undraggable desktop window bug

---
 src/components/Pressable/GenericPressable/index.js | 4 +++-
 web/index.html                                     | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Pressable/GenericPressable/index.js b/src/components/Pressable/GenericPressable/index.js
index 859552e10cf3..34924d1791ec 100644
--- a/src/components/Pressable/GenericPressable/index.js
+++ b/src/components/Pressable/GenericPressable/index.js
@@ -14,7 +14,9 @@ const WebGenericPressable = forwardRef((props, ref) => (
         aria-label={props.accessibilityLabel}
         aria-labelledby={props.accessibilityLabelledBy}
         aria-valuenow={props.accessibilityValue}
-        nativeID={props.nativeID || 'no-drag-area'}
+        nativeID={props.nativeID}
+        dataSet={{id: 'pressable'}}
+        className="ASDASD"
     />
 ));
 
diff --git a/web/index.html b/web/index.html
index d207fa54b97a..8507b990848b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -41,7 +41,7 @@
         #drag-area {
             -webkit-app-region: drag;
         }
-        #no-drag-area {
+        #no-drag-area, #drag-area [class*="touchAction"] {
             -webkit-app-region: no-drag;
         }
         input::placeholder {

From 653099be1456b56c49155d302b2abf6272652a62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= <michal.skalka@swmansion.com>
Date: Fri, 4 Aug 2023 10:28:16 +0200
Subject: [PATCH 2/7] removed unnecessary changes + fixed ThreePaneView

---
 src/components/Pressable/GenericPressable/index.js              | 2 --
 .../createResponsiveStackNavigator/ThreePaneView.js             | 1 +
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Pressable/GenericPressable/index.js b/src/components/Pressable/GenericPressable/index.js
index 34924d1791ec..ec5976a6db0b 100644
--- a/src/components/Pressable/GenericPressable/index.js
+++ b/src/components/Pressable/GenericPressable/index.js
@@ -15,8 +15,6 @@ const WebGenericPressable = forwardRef((props, ref) => (
         aria-labelledby={props.accessibilityLabelledBy}
         aria-valuenow={props.accessibilityValue}
         nativeID={props.nativeID}
-        dataSet={{id: 'pressable'}}
-        className="ASDASD"
     />
 ));
 
diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
index 2f9a899191bf..5b92a1304c26 100644
--- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
+++ b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
@@ -71,6 +71,7 @@ function ThreePaneView(props) {
                                     onPress={() => props.navigation.goBack()}
                                     accessibilityLabel={translate('common.close')}
                                     accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                    nativeID="no-drag-area"
                                 />
                                 <View style={styles.rightPanelContainer}>{props.descriptors[route.key].render()}</View>
                             </View>

From be90cd0fb047583da962655e7238f2965ac6e5ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= <michal.skalka@swmansion.com>
Date: Tue, 8 Aug 2023 08:42:12 +0200
Subject: [PATCH 3/7] review changes

---
 src/components/Pressable/GenericPressable/index.js | 1 +
 web/index.html                                     | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Pressable/GenericPressable/index.js b/src/components/Pressable/GenericPressable/index.js
index ec5976a6db0b..83514320f84f 100644
--- a/src/components/Pressable/GenericPressable/index.js
+++ b/src/components/Pressable/GenericPressable/index.js
@@ -15,6 +15,7 @@ const WebGenericPressable = forwardRef((props, ref) => (
         aria-labelledby={props.accessibilityLabelledBy}
         aria-valuenow={props.accessibilityValue}
         nativeID={props.nativeID}
+        dataSet={{tag: 'pressable'}}
     />
 ));
 
diff --git a/web/index.html b/web/index.html
index 8507b990848b..cef8056dcc02 100644
--- a/web/index.html
+++ b/web/index.html
@@ -41,8 +41,9 @@
         #drag-area {
             -webkit-app-region: drag;
         }
-        #no-drag-area, #drag-area [class*="touchAction"] {
+        #no-drag-area, #drag-area [data-tag="pressable"] {
             -webkit-app-region: no-drag;
+
         }
         input::placeholder {
             user-select: none;

From cd12636ebece3a40b02fa6d6bddafcd7c32d154c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= <michal.skalka@swmansion.com>
Date: Tue, 8 Aug 2023 09:27:31 +0200
Subject: [PATCH 4/7] changed nativeIDs to data-drag-area

---
 src/components/Modal/BaseModal.js                           | 2 +-
 src/components/Pressable/GenericPressable/index.js          | 2 +-
 .../createResponsiveStackNavigator/ThreePaneView.js         | 2 +-
 src/pages/home/HeaderView.js                                | 2 +-
 src/pages/home/sidebar/SidebarLinks.js                      | 2 +-
 web/index.html                                              | 6 +++---
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js
index 6d5bd5390416..5be90386baac 100644
--- a/src/components/Modal/BaseModal.js
+++ b/src/components/Modal/BaseModal.js
@@ -171,7 +171,7 @@ class BaseModal extends PureComponent {
                                     ...modalPaddingStyles,
                                 }}
                                 ref={this.props.forwardedRef}
-                                nativeID="no-drag-area"
+                                dataSet={{dragArea: false}}
                             >
                                 {this.props.children}
                             </View>
diff --git a/src/components/Pressable/GenericPressable/index.js b/src/components/Pressable/GenericPressable/index.js
index 83514320f84f..65fca85bc324 100644
--- a/src/components/Pressable/GenericPressable/index.js
+++ b/src/components/Pressable/GenericPressable/index.js
@@ -15,7 +15,7 @@ const WebGenericPressable = forwardRef((props, ref) => (
         aria-labelledby={props.accessibilityLabelledBy}
         aria-valuenow={props.accessibilityValue}
         nativeID={props.nativeID}
-        dataSet={{tag: 'pressable'}}
+        dataSet={{tag: 'pressable', ...(props.noDragArea && {dragArea: false})}}
     />
 ));
 
diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
index 5b92a1304c26..d6b1d19e52bf 100644
--- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
+++ b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
@@ -71,7 +71,7 @@ function ThreePaneView(props) {
                                     onPress={() => props.navigation.goBack()}
                                     accessibilityLabel={translate('common.close')}
                                     accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                                    nativeID="no-drag-area"
+                                    noDragArea
                                 />
                                 <View style={styles.rightPanelContainer}>{props.descriptors[route.key].render()}</View>
                             </View>
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 85cdd239dae7..f8f137d86039 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -138,7 +138,7 @@ function HeaderView(props) {
     return (
         <View
             style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}
-            nativeID="drag-area"
+            dataSet={{dragArea: true}}
         >
             <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
                 {props.isSmallScreenWidth && (
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 5747ed0e1d4a..b9d52d9ab357 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -165,7 +165,7 @@ class SidebarLinks extends React.PureComponent {
             <View style={[styles.flex1, styles.h100]}>
                 <View
                     style={[styles.flexRow, styles.ph5, styles.pv3, styles.justifyContentBetween, styles.alignItemsCenter]}
-                    nativeID="drag-area"
+                    dataSet={{dragArea: true}}
                 >
                     <Header
                         title={
diff --git a/web/index.html b/web/index.html
index cef8056dcc02..05730c111edc 100644
--- a/web/index.html
+++ b/web/index.html
@@ -38,10 +38,10 @@
            overscroll-behavior: none;
            touch-action: none;
         }
-        #drag-area {
+        [data-drag-area='true'] {
             -webkit-app-region: drag;
         }
-        #no-drag-area, #drag-area [data-tag="pressable"] {
+        [data-drag-area='false'], [data-drag-area='true'] [data-tag="pressable"] {
             -webkit-app-region: no-drag;
 
         }
@@ -129,7 +129,7 @@
     <% } %>
 </head>
 <body>
-    <div style="position: absolute; top: 0; left: 0; right: 0; height: 30px;" id="drag-area"></div>
+    <div style="position: absolute; top: 0; left: 0; right: 0; height: 30px;" data-drag-area="true"></div>
     <div id="root"></div>
     <div id="splash">
         <div class="splash-logo">

From 9b9982b9b3bb7805dcaf160c6ef13903d3efab3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= <michal.skalka@swmansion.com>
Date: Wed, 16 Aug 2023 16:06:51 +0200
Subject: [PATCH 5/7] removed noDragArea

---
 .../AppNavigator/createResponsiveStackNavigator/ThreePaneView.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
index d6b1d19e52bf..2f9a899191bf 100644
--- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
+++ b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
@@ -71,7 +71,6 @@ function ThreePaneView(props) {
                                     onPress={() => props.navigation.goBack()}
                                     accessibilityLabel={translate('common.close')}
                                     accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                                    noDragArea
                                 />
                                 <View style={styles.rightPanelContainer}>{props.descriptors[route.key].render()}</View>
                             </View>

From 0f3967cc31189f9182fc459cd7341a4663238193 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= <michal.skalka@swmansion.com>
Date: Wed, 16 Aug 2023 16:29:14 +0200
Subject: [PATCH 6/7] Made top part of desktop application draggaable in
 ThreePaneView

---
 .../ThreePaneView.js                          | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
index 2f9a899191bf..02edb8b38c49 100644
--- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
+++ b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
@@ -66,12 +66,24 @@ function ThreePaneView(props) {
                                     StyleUtils.displayIfTrue(props.state.index === i),
                                 ]}
                             >
-                                <PressableWithoutFeedback
-                                    style={[styles.flex1]}
-                                    onPress={() => props.navigation.goBack()}
-                                    accessibilityLabel={translate('common.close')}
-                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                                />
+                                <View style={[styles.flex1, styles.flexColumn]}>
+                                    {/* The PressableWithoutFeedback with 30px height was added to make whole dimmed area pressable
+                                    on all web devices, but aslo make the top of the desktop apps draggable.
+                                    Please remember that in latestest Electron update, buttons can't be both draggable and clickable  */}
+                                    <PressableWithoutFeedback
+                                        style={[styles.w100, {height: 30}]}
+                                        onPress={() => props.navigation.goBack()}
+                                        accessibilityLabel={translate('common.close')}
+                                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                    />
+                                    <PressableWithoutFeedback
+                                        style={[styles.flex1]}
+                                        onPress={() => props.navigation.goBack()}
+                                        accessibilityLabel={translate('common.close')}
+                                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                        noDragArea
+                                    />
+                                </View>
                                 <View style={styles.rightPanelContainer}>{props.descriptors[route.key].render()}</View>
                             </View>
                         </Wrapper>

From f258e3e18a32cb0b2dfc6da83f8766bf0647eb77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= <michal.skalka@swmansion.com>
Date: Mon, 21 Aug 2023 11:12:09 +0200
Subject: [PATCH 7/7] changed styles and comment

---
 .../createResponsiveStackNavigator/ThreePaneView.js      | 9 +++++----
 src/styles/styles.js                                     | 4 ++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
index 02edb8b38c49..222dedd4cce8 100644
--- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
+++ b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
@@ -67,11 +67,12 @@ function ThreePaneView(props) {
                                 ]}
                             >
                                 <View style={[styles.flex1, styles.flexColumn]}>
-                                    {/* The PressableWithoutFeedback with 30px height was added to make whole dimmed area pressable
-                                    on all web devices, but aslo make the top of the desktop apps draggable.
-                                    Please remember that in latestest Electron update, buttons can't be both draggable and clickable  */}
+                                    {/* In the latest Electron version buttons can't be both clickable and draggable. 
+                                    That's why we added this workaround. Because of two Pressable components on the desktop app 
+                                    we have 30px draggable ba at the top and the rest of the dimmed area is clickable. On other devices,
+                                    everything behaves normally like one big pressable */}
                                     <PressableWithoutFeedback
-                                        style={[styles.w100, {height: 30}]}
+                                        style={[styles.draggableTopBar]}
                                         onPress={() => props.navigation.goBack()}
                                         accessibilityLabel={translate('common.close')}
                                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 4217148bd35b..7e763111cc51 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3762,6 +3762,10 @@ const styles = {
         fontSize: variables.fontSizeNormal,
         marginRight: 4,
     },
+    draggableTopBar: {
+        height: 30,
+        width: '100%',
+    },
 };
 
 export default styles;