Merge pull request #59221 from software-mansion-labs/side-pane-feature-flag

Add const / permissions function for help side panel beta

Author: francoisl

src/CONST.ts

@@ -772,6 +772,7 @@ const CONST = {
         NEW_DOT_TALK_TO_AI_SALES: 'newDotTalkToAISales',
         CUSTOM_RULES: 'customRules',
         TABLE_REPORT_VIEW: 'tableReportView',
+        HELP_SIDE_PANEL: 'newDotHelpSidePanel',
         RECEIPT_LINE_ITEMS: 'receiptLineItems',
     },
     BUTTON_STATES: {

src/hooks/useSidePane.ts

@@ -20,6 +20,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 ||
@@ -35,14 +36,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
+    // - the user is not part of the corresponding beta
     // - 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};
@@ -82,25 +83,17 @@ function useSidePane() {
     }, [shouldHideSidePane, shouldApplySidePaneOffset, sidePaneWidth]);
 
     const openSidePane = useCallback(() => {
-        if (!sidePaneNVP) {
-            return;
-        }
-
         setIsSidePaneTransitionEnded(false);
         KeyboardUtils.dismiss();
 
         triggerSidePane({
             isOpen: true,
             isOpenNarrowScreen: isExtraLargeScreenWidth ? undefined : true,
         });
-    }, [isExtraLargeScreenWidth, sidePaneNVP]);
+    }, [isExtraLargeScreenWidth]);
 
     const closeSidePane = useCallback(
         (shouldUpdateNarrow = false) => {
-            if (!sidePaneNVP) {
-                return;
-            }
-
             setIsSidePaneTransitionEnded(false);
             const shouldOnlyUpdateNarrowLayout = !isExtraLargeScreenWidth || shouldUpdateNarrow;
             triggerSidePane({
@@ -111,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 {

src/libs/Permissions.ts

@@ -54,6 +54,10 @@ function canUseTableReportView(betas: OnyxEntry<Beta[]>): boolean {
     return !!betas?.includes(CONST.BETAS.TABLE_REPORT_VIEW) || canUseAllBetas(betas);
 }
 
+function canUseHelpSidePanel(betas: OnyxEntry<Beta[]>): boolean {
+    return !!betas?.includes(CONST.BETAS.HELP_SIDE_PANEL) || canUseAllBetas(betas);
+}
+
 function canUseTalkToAISales(betas: OnyxEntry<Beta[]>): boolean {
     return !!betas?.includes(CONST.BETAS.NEW_DOT_TALK_TO_AI_SALES) || canUseAllBetas(betas);
 }
@@ -74,6 +78,7 @@ export default {
     canUseInternationalBankAccount,
     canUseCustomRules,
     canUseTableReportView,
+    canUseHelpSidePanel,
     canUseTalkToAISales,
     canUseProhibitedExpenses,
 };