Merge pull request #15417 from Expensify/revert-13900-neil-test-tool-…

…gesture

Revert "Open a test tools modal with 5 taps on dev"

src/CONST.js

@@ -375,7 +375,6 @@ const CONST = {
             CONFIRM: 'confirm',
             CENTERED: 'centered',
             CENTERED_UNSWIPEABLE: 'centered_unswipeable',
-            CENTERED_SMALL: 'centered_small',
             BOTTOM_DOCKED: 'bottom_docked',
             POPOVER: 'popover',
             RIGHT_DOCKED: 'right_docked',
@@ -401,7 +400,6 @@ const CONST = {
         WARM: 'warm',
         REPORT_ACTION_ITEM_LAYOUT_DEBOUNCE_TIME: 1500,
         SHOW_LOADING_SPINNER_DEBOUNCE_TIME: 250,
-        TEST_TOOLS_MODAL_THROTTLE_TIME: 800,
         TOOLTIP_SENSE: 1000,
         TRIE_INITIALIZATION: 'trie_initialization',
     },

src/ONYXKEYS.js

@@ -170,9 +170,6 @@ export default {
     // Is Keyboard shortcuts modal open?
     IS_SHORTCUTS_MODAL_OPEN: 'isShortcutsModalOpen',
 
-    // Is the test tools modal open?
-    IS_TEST_TOOLS_MODAL_OPEN: 'isTestToolsModalOpen',
-
     // Stores information about active wallet transfer amount, selectedAccountID, status, etc
     WALLET_TRANSFER: 'walletTransfer',
 

src/components/ScreenWrapper/index.js

@@ -1,6 +1,5 @@
 import {View} from 'react-native';
 import React from 'react';
-import {GestureDetector, Gesture} from 'react-native-gesture-handler';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
@@ -14,13 +13,10 @@ import OfflineIndicator from '../OfflineIndicator';
 import compose from '../../libs/compose';
 import withNavigation from '../withNavigation';
 import withWindowDimensions from '../withWindowDimensions';
-import withEnvironment from '../withEnvironment';
 import ONYXKEYS from '../../ONYXKEYS';
 import {withNetwork} from '../OnyxProvider';
 import {propTypes, defaultProps} from './propTypes';
-import * as App from '../../libs/actions/App';
 import SafeAreaConsumer from '../SafeAreaConsumer';
-import TestToolsModal from '../TestToolsModal';
 
 class ScreenWrapper extends React.Component {
     constructor(props) {
@@ -82,19 +78,6 @@ class ScreenWrapper extends React.Component {
     }
 
     render() {
-        // Open the test tools menu on 5 taps in dev only
-        const isDevEnvironment = this.props.environment === CONST.ENVIRONMENT.DEV;
-        const quintupleTap = Gesture.Tap()
-            .numberOfTaps(5)
-
-            // Run the callbacks on the JS thread otherwise there's an error on iOS
-            .runOnJS(true)
-            .onEnd(() => {
-                if (!isDevEnvironment) {
-                    return;
-                }
-                App.toggleTestToolsModal();
-            });
         return (
             <SafeAreaConsumer>
                 {({
@@ -112,32 +95,29 @@ class ScreenWrapper extends React.Component {
                     }
 
                     return (
-                        <GestureDetector gesture={quintupleTap}>
-                            <View
-                                style={[
-                                    ...this.props.style,
-                                    styles.flex1,
-                                    paddingStyle,
-                                ]}
-                            >
-                                <KeyboardAvoidingView style={[styles.w100, styles.h100, {maxHeight: this.props.windowHeight}]} behavior={this.props.keyboardAvoidingViewBehavior}>
-                                    <HeaderGap />
-                                    {(this.props.environment === CONST.ENVIRONMENT.DEV) && <TestToolsModal />}
-                                    {// If props.children is a function, call it to provide the insets to the children.
-                                        _.isFunction(this.props.children)
-                                            ? this.props.children({
-                                                insets,
-                                                safeAreaPaddingBottomStyle,
-                                                didScreenTransitionEnd: this.state.didScreenTransitionEnd,
-                                            })
-                                            : this.props.children
-                                    }
-                                    {this.props.isSmallScreenWidth && (
-                                        <OfflineIndicator />
-                                    )}
-                                </KeyboardAvoidingView>
-                            </View>
-                        </GestureDetector>
+                        <View
+                            style={[
+                                ...this.props.style,
+                                styles.flex1,
+                                paddingStyle,
+                            ]}
+                        >
+                            <KeyboardAvoidingView style={[styles.w100, styles.h100, {maxHeight: this.props.windowHeight}]} behavior={this.props.keyboardAvoidingViewBehavior}>
+                                <HeaderGap />
+                                {// If props.children is a function, call it to provide the insets to the children.
+                                    _.isFunction(this.props.children)
+                                        ? this.props.children({
+                                            insets,
+                                            safeAreaPaddingBottomStyle,
+                                            didScreenTransitionEnd: this.state.didScreenTransitionEnd,
+                                        })
+                                        : this.props.children
+                                }
+                                {this.props.isSmallScreenWidth && (
+                                    <OfflineIndicator />
+                                )}
+                            </KeyboardAvoidingView>
+                        </View>
                     );
                 }}
             </SafeAreaConsumer>
@@ -155,10 +135,6 @@ export default compose(
         modal: {
             key: ONYXKEYS.MODAL,
         },
-        isTestToolsModalOpen: {
-            key: ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN,
-        },
     }),
     withNetwork(),
-    withEnvironment,
 )(ScreenWrapper);

src/components/ScreenWrapper/propTypes.js

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import {environmentPropTypes} from '../withEnvironment';
 
 const propTypes = {
     /** Array of additional styles to add */
@@ -20,9 +19,6 @@ const propTypes = {
     // Called when navigated Screen's transition is finished. It does not fire when user exit the page.
     onEntryTransitionEnd: PropTypes.func,
 
-    // Is the test tools modal open?
-    isTestToolsModalOpen: PropTypes.bool,
-
     /** The behavior to pass to the KeyboardAvoidingView, requires some trial and error depending on the layout/devices used.
      *  Search 'switch(behavior)' in ./node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js for more context */
     keyboardAvoidingViewBehavior: PropTypes.oneOf(['padding', 'height', 'position']),
@@ -32,8 +28,6 @@ const propTypes = {
         /** Indicates when an Alert modal is about to be visible */
         willAlertModalBecomeVisible: PropTypes.bool,
     }),
-
-    ...environmentPropTypes,
 };
 
 const defaultProps = {
@@ -42,7 +36,6 @@ const defaultProps = {
     includePaddingTop: true,
     onEntryTransitionEnd: () => {},
     modal: {},
-    isTestToolsModalOpen: false,
     keyboardAvoidingViewBehavior: 'padding',
 };
 

src/components/TestToolMenu.js

@@ -37,7 +37,7 @@ const defaultProps = {
 
 const TestToolMenu = props => (
     <>
-        <Text style={[styles.textLabelSupporting, styles.mb2]} numberOfLines={1}>
+        <Text style={[styles.textLabelSupporting, styles.mb2, styles.mt6]} numberOfLines={1}>
             Test Preferences
         </Text>
 

src/components/TestToolRow.js

@@ -13,7 +13,7 @@ const propTypes = {
 };
 
 const TestToolRow = props => (
-    <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween, styles.alignItemsCenter, styles.mnw120]}>
+    <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween, styles.alignItemsCenter]}>
         <View style={styles.flex2}>
             <Text>
                 {props.title}

src/libs/actions/App.js

@@ -286,22 +286,6 @@ function openProfile() {
     Navigation.navigate(ROUTES.SETTINGS_PROFILE);
 }
 
-let isTestToolsModalOpen = false;
-Onyx.connect({
-    key: ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN,
-    callback: val => isTestToolsModalOpen = val || false,
-});
-
-/**
- * Toggle the test tools modal open or closed. Throttle the toggle to fix Android Chrome where there seems to be an extra tap which closes the modal.
- * Throttling also makes the modal stay open if you accidentally tap an extra time, which is easy to do.
- */
-function toggleTestToolsModal() {
-    const toggle = () => Onyx.set(ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN, !isTestToolsModalOpen);
-    const throttledToggle = _.throttle(toggle, CONST.TIMING.TEST_TOOLS_MODAL_THROTTLE_TIME);
-    throttledToggle();
-}
-
 export {
     setLocale,
     setLocaleAndNavigate,
@@ -310,5 +294,4 @@ export {
     openProfile,
     openApp,
     reconnectApp,
-    toggleTestToolsModal,
 };

src/styles/getModalStyles/getBaseModalStyles.js

@@ -124,37 +124,6 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, innerContain
             shouldAddTopSafeAreaPadding = isSmallScreenWidth;
             shouldAddBottomSafeAreaPadding = false;
             break;
-        case CONST.MODAL.MODAL_TYPE.CENTERED_SMALL:
-            // A centered modal that takes up the minimum possible screen space on all devices
-            modalStyle = {
-                ...modalStyle,
-                ...{
-                    alignItems: 'center',
-                },
-            };
-            modalContainerStyle = {
-                // Shadow Styles
-                shadowColor: themeColors.shadow,
-                shadowOffset: {
-                    width: 0,
-                    height: 0,
-                },
-                shadowOpacity: 0.1,
-                shadowRadius: 5,
-
-                borderRadius: 12,
-                borderWidth: 0,
-            };
-
-            // Allow this modal to be dismissed with a swipe down or swipe right
-            swipeDirection = ['down', 'right'];
-            animationIn = 'fadeIn';
-            animationOut = 'fadeOut';
-            shouldAddTopSafeAreaMargin = false;
-            shouldAddBottomSafeAreaMargin = false;
-            shouldAddTopSafeAreaPadding = false;
-            shouldAddBottomSafeAreaPadding = false;
-            break;
         case CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED:
             modalStyle = {
                 ...modalStyle,

src/styles/utilities/sizing.js

@@ -24,10 +24,6 @@ export default {
         minWidth: '25%',
     },
 
-    mnw120: {
-        minWidth: 120,
-    },
-
     w50: {
         width: '50%',
     },