From e504053a67a66587716906b71077078d0436f238 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 15 Oct 2026 01:51:00 +0200 Subject: [PATCH 01/22] Fit the Describe rule modal above the keyboard on small screens --- src/pages/workspace/rules/DescribeRuleModal.tsx | 11 +++++++++-- src/styles/index.ts | 4 ++++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/rules/DescribeRuleModal.tsx b/src/pages/workspace/rules/DescribeRuleModal.tsx index 8df9647d37be..6b65b0580df3 100644 --- a/src/pages/workspace/rules/DescribeRuleModal.tsx +++ b/src/pages/workspace/rules/DescribeRuleModal.tsx @@ -12,7 +12,10 @@ import TextInput from '@components/TextInput'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import useViewportOffsetTop from '@hooks/useViewportOffsetTop'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import {getDecodedCategoryName} from '@libs/CategoryUtils'; @@ -60,6 +63,9 @@ function withPolicyCategory(values: GeneratedRuleValues, policyCategories: OnyxE function DescribeRuleModal({isVisible, onClose, policyID, ruleType, onRuleGenerated}: DescribeRuleModalProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); + const {windowHeight} = useWindowDimensions(); + const viewportOffsetTop = useViewportOffsetTop(); // We need to use isSmallScreenWidth here because the Modal breaks in RHP with shouldUseNarrowLayout. // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); @@ -144,6 +150,7 @@ function DescribeRuleModal({isVisible, onClose, policyID, ruleType, onRuleGenera onClose={close} type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM} innerContainerStyle={styles.pv0} + outerStyle={isSmallScreenWidth ? StyleUtils.getOuterModalStyle(windowHeight, viewportOffsetTop) : undefined} avoidKeyboard shouldHandleNavigationBack enableEdgeToEdgeBottomSafeAreaPadding @@ -156,13 +163,13 @@ function DescribeRuleModal({isVisible, onClose, policyID, ruleType, onRuleGenera submitButtonText={translate('common.next')} style={[styles.mt5, styles.mh5]} addBottomSafeAreaPadding={isSmallScreenWidth} - shouldUseScrollView={false} + shouldUseScrollView={isSmallScreenWidth} submitFlexEnabled={false} shouldHideFixErrorsAlert keyboardSubmitBehavior={CONST.KEYBOARD_SUBMIT_BEHAVIOR.SUBMIT_ONLY} > {translate('workspace.rules.newRule.describeRule')} - + height: variables.describeRulePromptInputHeight, }, + describeRulePromptInputNarrow: { + height: variables.textInputAutoGrowMaxHeight, + }, + emptyStateSamlIllustration: { width: 183, height: 160, From 303dc26a9b850701b7532df9e11ed0e336510a3d Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 15 Oct 2026 01:51:31 +0200 Subject: [PATCH 02/22] Clear the last Describe prompt and error each time the modal opens --- src/pages/workspace/rules/DescribeRuleButton.tsx | 13 ++++++++++++- src/pages/workspace/rules/DescribeRuleModal.tsx | 8 -------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/pages/workspace/rules/DescribeRuleButton.tsx b/src/pages/workspace/rules/DescribeRuleButton.tsx index 3cc111931343..6bfadbed4f5d 100644 --- a/src/pages/workspace/rules/DescribeRuleButton.tsx +++ b/src/pages/workspace/rules/DescribeRuleButton.tsx @@ -7,6 +7,8 @@ import useLocalize from '@hooks/useLocalize'; import usePermissions from '@hooks/usePermissions'; import useThemeStyles from '@hooks/useThemeStyles'; +import {clearNewRulePrompt} from '@userActions/Policy/Rules'; + import CONST from '@src/CONST'; import type {GeneratedRuleType, GeneratedRuleValues} from '@src/types/onyx/GeneratedRule'; @@ -46,12 +48,21 @@ function DescribeRuleButton(props: DescribeRuleButtonProps) { return null; } + const openModal = () => { + clearNewRulePrompt(); + if (props.onPress) { + props.onPress(); + return; + } + setIsModalVisible(true); + }; + return ( <>