From 59f7a383c8ac3fc73441ac3b73da12f831a22d9e Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 27 Mar 2025 14:47:35 +0100 Subject: [PATCH 1/3] Add HELP_SIDE_PANEL constant and permission check --- src/CONST.ts | 1 + src/libs/Permissions.ts | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/src/CONST.ts b/src/CONST.ts index 6de65ae74f63..8cac2f35e6fc 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -776,6 +776,7 @@ const CONST = { NSQS: 'nsqs', CUSTOM_RULES: 'customRules', TABLE_REPORT_VIEW: 'tableReportView', + HELP_SIDE_PANEL: 'newDotHelpSidePanel', RECEIPT_LINE_ITEMS: 'receiptLineItems', }, BUTTON_STATES: { diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index c708518d584d..d1295ab93414 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -58,6 +58,10 @@ function canUseTableReportView(betas: OnyxEntry): boolean { return !!betas?.includes(CONST.BETAS.TABLE_REPORT_VIEW) || canUseAllBetas(betas); } +function canUseHelpSidePanel(betas: OnyxEntry): boolean { + return !!betas?.includes(CONST.BETAS.HELP_SIDE_PANEL) || canUseAllBetas(betas); +} + function canUseTalkToAISales(betas: OnyxEntry): boolean { return !!betas?.includes(CONST.BETAS.NEW_DOT_TALK_TO_AI_SALES) || canUseAllBetas(betas); } @@ -79,6 +83,7 @@ export default { canUseNSQS, canUseCustomRules, canUseTableReportView, + canUseHelpSidePanel, canUseTalkToAISales, canUseProhibitedExpenses, }; From f55e52fb34385cbfecaf84e80206db1196d1854c Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 27 Mar 2025 14:47:46 +0100 Subject: [PATCH 2/3] Add help side panel beta check to side pane display logic --- src/hooks/useSidePane.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index 5ad04dc16d8d..d16ba730848b 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -19,6 +19,7 @@ function useSidePaneDisplayStatus() { const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const [sidePaneNVP] = useOnyx(ONYXKEYS.NVP_SIDE_PANE); const [language] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE); + const [canUseHelpSidePanel = false] = useOnyx(ONYXKEYS.BETAS, {selector: (betas) => !!betas?.includes(CONST.BETAS.HELP_SIDE_PANEL)}); const [isModalCenteredVisible = false] = useOnyx(ONYXKEYS.MODAL, { selector: (modal) => modal?.type === CONST.MODAL.MODAL_TYPE.CENTERED_SWIPABLE_TO_RIGHT || @@ -33,14 +34,14 @@ function useSidePaneDisplayStatus() { // - NVP is not set or it is false // - language is unsupported // - modal centered is visible - const shouldHideSidePane = !isSidePaneVisible || isLanguageUnsupported || isModalCenteredVisible; - const isSidePaneHiddenOrLargeScreen = !isSidePaneVisible || isLanguageUnsupported || isExtraLargeScreenWidth; + const shouldHideSidePane = !isSidePaneVisible || isLanguageUnsupported || isModalCenteredVisible || !canUseHelpSidePanel; + const isSidePaneHiddenOrLargeScreen = !isSidePaneVisible || isLanguageUnsupported || isExtraLargeScreenWidth || !canUseHelpSidePanel; // The help button is hidden when: // - side pane nvp is not set // - side pane is displayed currently // - language is unsupported - const shouldHideHelpButton = !sidePaneNVP || !shouldHideSidePane || isLanguageUnsupported; + const shouldHideHelpButton = !canUseHelpSidePanel || !shouldHideSidePane || isLanguageUnsupported; const shouldHideSidePaneBackdrop = shouldHideSidePane || isExtraLargeScreenWidth || shouldUseNarrowLayout; return {shouldHideSidePane, isSidePaneHiddenOrLargeScreen, shouldHideHelpButton, shouldHideSidePaneBackdrop, sidePaneNVP}; From c967cd8d33f07917ece87fc2b7861847c5d81466 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Mon, 31 Mar 2025 17:00:54 +0200 Subject: [PATCH 3/3] refactor: simplify side pane logic by removing unnecessary checks for sidePaneNVP --- src/hooks/useSidePane.ts | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/hooks/useSidePane.ts b/src/hooks/useSidePane.ts index fdc26dffe3a1..1cf4807e7e9e 100644 --- a/src/hooks/useSidePane.ts +++ b/src/hooks/useSidePane.ts @@ -40,7 +40,7 @@ function useSidePaneDisplayStatus() { const isSidePaneHiddenOrLargeScreen = !isSidePaneVisible || isLanguageUnsupported || isExtraLargeScreenWidth || !canUseHelpSidePanel; // The help button is hidden when: - // - side pane nvp is not set + // - the user is not part of the corresponding beta // - side pane is displayed currently // - language is unsupported const shouldHideHelpButton = !canUseHelpSidePanel || !shouldHideSidePane || isLanguageUnsupported; @@ -83,10 +83,6 @@ function useSidePane() { }, [shouldHideSidePane, shouldApplySidePaneOffset, sidePaneWidth]); const openSidePane = useCallback(() => { - if (!sidePaneNVP) { - return; - } - setIsSidePaneTransitionEnded(false); KeyboardUtils.dismiss(); @@ -94,14 +90,10 @@ function useSidePane() { isOpen: true, isOpenNarrowScreen: isExtraLargeScreenWidth ? undefined : true, }); - }, [isExtraLargeScreenWidth, sidePaneNVP]); + }, [isExtraLargeScreenWidth]); const closeSidePane = useCallback( (shouldUpdateNarrow = false) => { - if (!sidePaneNVP) { - return; - } - setIsSidePaneTransitionEnded(false); const shouldOnlyUpdateNarrowLayout = !isExtraLargeScreenWidth || shouldUpdateNarrow; triggerSidePane({ @@ -112,7 +104,7 @@ function useSidePane() { // Focus the composer after closing the side pane focusComposerWithDelay(ReportActionComposeFocusManager.composerRef.current, CONST.ANIMATED_TRANSITION + CONST.COMPOSER_FOCUS_DELAY)(true); }, - [isExtraLargeScreenWidth, sidePaneNVP], + [isExtraLargeScreenWidth], ); return {