1+ import { isEmpty } from 'lodash' ;
12import React , { useMemo } from 'react' ;
23import type { StyleProp , TextStyle , ViewStyle } from 'react-native' ;
34import { View } from 'react-native' ;
45import useLocalize from '@hooks/useLocalize' ;
56import useThemeStyles from '@hooks/useThemeStyles' ;
67import Navigation from '@libs/Navigation/Navigation' ;
8+ import * as PolicyUtils from '@libs/PolicyUtils' ;
79import type { AccessVariant } from '@pages/workspace/AccessOrNotFoundWrapper' ;
810import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper' ;
911import type { TranslationPaths } from '@src/languages/types' ;
10- import type { PolicyFeatureName } from '@src/types/onyx/Policy' ;
12+ import type { ConnectionName , PolicyFeatureName } from '@src/types/onyx/Policy' ;
1113import HeaderWithBackButton from './HeaderWithBackButton' ;
1214import ScreenWrapper from './ScreenWrapper' ;
1315import ScrollView from './ScrollView' ;
@@ -17,16 +19,16 @@ type ConnectionLayoutProps = {
1719 /** Used to set the testID for tests */
1820 displayName : string ;
1921
20- /** Header title for the connection */
21- headerTitle : TranslationPaths ;
22+ /** Header title to be translated for the connection component */
23+ headerTitle ? : TranslationPaths ;
2224
2325 /** The subtitle to show in the header */
2426 headerSubtitle ?: string ;
2527
2628 /** React nodes that will be shown */
2729 children ?: React . ReactNode ;
2830
29- /** Title of the connection component */
31+ /** Title to be translated for the connection component */
3032 title ?: TranslationPaths ;
3133
3234 /** The current policyID */
@@ -44,18 +46,30 @@ type ConnectionLayoutProps = {
4446 /** Style of the title text */
4547 titleStyle ?: StyleProp < TextStyle > | undefined ;
4648
49+ /** Whether to include safe area padding bottom or not */
50+ shouldIncludeSafeAreaPaddingBottom ?: boolean ;
51+
4752 /** Whether to use ScrollView or not */
4853 shouldUseScrollView ?: boolean ;
54+
55+ /** Used for dynamic header title translation with parameters */
56+ headerTitleAlreadyTranslated ?: string ;
57+
58+ /** Used for dynamic title translation with parameters */
59+ titleAlreadyTranslated ?: string ;
60+
61+ /** Name of the current connection */
62+ connectionName : ConnectionName ;
4963} ;
5064
51- type ConnectionLayoutContentProps = Pick < ConnectionLayoutProps , 'title' | 'titleStyle' | 'children' > ;
65+ type ConnectionLayoutContentProps = Pick < ConnectionLayoutProps , 'title' | 'titleStyle' | 'children' | 'titleAlreadyTranslated' > ;
5266
53- function ConnectionLayoutContent ( { title, titleStyle, children} : ConnectionLayoutContentProps ) {
67+ function ConnectionLayoutContent ( { title, titleStyle, children, titleAlreadyTranslated } : ConnectionLayoutContentProps ) {
5468 const { translate} = useLocalize ( ) ;
5569 const styles = useThemeStyles ( ) ;
5670 return (
5771 < >
58- { title && < Text style = { [ styles . pb5 , titleStyle ] } > { translate ( title ) } </ Text > }
72+ { title && < Text style = { [ styles . pb5 , titleStyle ] } > { titleAlreadyTranslated ?? translate ( title ) } </ Text > }
5973 { children }
6074 </ >
6175 ) ;
@@ -72,35 +86,44 @@ function ConnectionLayout({
7286 featureName,
7387 contentContainerStyle,
7488 titleStyle,
89+ shouldIncludeSafeAreaPaddingBottom,
90+ connectionName,
7591 shouldUseScrollView = true ,
92+ headerTitleAlreadyTranslated,
93+ titleAlreadyTranslated,
7694} : ConnectionLayoutProps ) {
7795 const { translate} = useLocalize ( ) ;
7896
97+ const policy = PolicyUtils . getPolicy ( policyID ?? '' ) ;
98+ const isConnectionEmpty = isEmpty ( policy . connections ?. [ connectionName ] ) ;
99+
79100 const renderSelectionContent = useMemo (
80101 ( ) => (
81102 < ConnectionLayoutContent
82103 title = { title }
83104 titleStyle = { titleStyle }
105+ titleAlreadyTranslated = { titleAlreadyTranslated }
84106 >
85107 { children }
86108 </ ConnectionLayoutContent >
87109 ) ,
88- [ title , titleStyle , children ] ,
110+ [ title , titleStyle , children , titleAlreadyTranslated ] ,
89111 ) ;
90112
91113 return (
92114 < AccessOrNotFoundWrapper
93115 policyID = { policyID }
94116 accessVariants = { accessVariants }
95117 featureName = { featureName }
118+ shouldBeBlocked = { isConnectionEmpty }
96119 >
97120 < ScreenWrapper
98- includeSafeAreaPaddingBottom = { false }
121+ includeSafeAreaPaddingBottom = { ! ! shouldIncludeSafeAreaPaddingBottom }
99122 shouldEnableMaxHeight
100123 testID = { displayName }
101124 >
102125 < HeaderWithBackButton
103- title = { translate ( headerTitle ) }
126+ title = { headerTitleAlreadyTranslated ?? ( headerTitle ? translate ( headerTitle as TranslationPaths ) : '' ) }
104127 subtitle = { headerSubtitle }
105128 onBackButtonPress = { ( ) => Navigation . goBack ( ) }
106129 />
0 commit comments