-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add new blocking view for new room page #30051
Changes from 2 commits
eab7290
299a60c
5e4f72e
dba11e8
d1e23ef
f633aa2
587a390
70fec0f
dac71e2
b5014c7
6af325a
4590ea0
fd71189
388b7d1
452a6e8
399635f
133f9d2
ee544d8
1c63ef7
dad8c0c
5573367
1f0e812
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -27,6 +27,11 @@ import compose from '../../libs/compose'; | |
import variables from '../../styles/variables'; | ||
import useDelayedInputFocus from '../../hooks/useDelayedInputFocus'; | ||
import ValuePicker from '../../components/ValuePicker'; | ||
import BlockingView from '../../components/BlockingViews/BlockingView'; | ||
import * as Illustrations from '../../components/Icon/Illustrations'; | ||
import Button from '../../components/Button'; | ||
import Navigation from '../../libs/Navigation/Navigation'; | ||
import ROUTES from '../../ROUTES'; | ||
|
||
const propTypes = { | ||
/** All reports shared with the user */ | ||
|
@@ -162,7 +167,7 @@ function WorkspaceNewRoomPage(props) { | |
|
||
return ( | ||
<FullPageNotFoundView | ||
shouldShow={!Permissions.canUsePolicyRooms(props.betas) || !workspaceOptions.length} | ||
shouldShow={!Permissions.canUsePolicyRooms(props.betas)} | ||
shouldShowBackButton={false} | ||
linkKey="workspace.emptyWorkspace.title" | ||
onLinkPress={() => App.createWorkspaceAndNavigateToIt('', false, '', false, false)} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think with our change, we should revert those changes from the previous PR #27983. It doesn't make sense when we don't have permission to use policy room, but the helper text is creating workspaces |
||
|
@@ -174,77 +179,96 @@ function WorkspaceNewRoomPage(props) { | |
shouldEnablePickerAvoiding={false} | ||
testID={WorkspaceNewRoomPage.displayName} | ||
> | ||
{({insets}) => ( | ||
<KeyboardAvoidingView | ||
style={styles.h100} | ||
behavior="padding" | ||
// Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen. | ||
// This is because when wrapping whole screen the screen was freezing when changing Tabs. | ||
keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top} | ||
> | ||
<Form | ||
formID={ONYXKEYS.FORMS.NEW_ROOM_FORM} | ||
submitButtonText={translate('newRoomPage.createRoom')} | ||
style={[styles.mh5, styles.flexGrow1]} | ||
validate={validate} | ||
onSubmit={submit} | ||
enabledWhenOffline | ||
{({insets}) => | ||
workspaceOptions.length ? ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It looks hard to read code. Because the children of Do you have any idea to make it more readable? Thanks There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @hoangzinh Updated. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why didn't we do the reverse? Lift the empty view out (because I think it's a sub/edge case view), and arrange the code to something like this: isEmpty(workspaceOptions)
? renderEmptyWorkspace()
: ... what do you think? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @hoangzinh Do you think about lifting both views out? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It's up to you, but I think it's not necessary. |
||
<KeyboardAvoidingView | ||
style={styles.h100} | ||
behavior="padding" | ||
// Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen. | ||
// This is because when wrapping whole screen the screen was freezing when changing Tabs. | ||
keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top} | ||
> | ||
<View style={styles.mb5}> | ||
<RoomNameInput | ||
ref={(el) => (roomNameInputRef.current = el)} | ||
inputID="roomName" | ||
isFocused={props.isFocused} | ||
shouldDelayFocus | ||
autoFocus | ||
/> | ||
</View> | ||
<View style={styles.mb5}> | ||
<TextInput | ||
inputID="welcomeMessage" | ||
label={translate('welcomeMessagePage.welcomeMessageOptional')} | ||
accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')} | ||
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} | ||
autoGrowHeight | ||
maxLength={CONST.MAX_COMMENT_LENGTH} | ||
autoCapitalize="none" | ||
textAlignVertical="top" | ||
containerStyles={[styles.autoGrowHeightMultilineInput]} | ||
/> | ||
</View> | ||
<View style={[styles.mhn5]}> | ||
<ValuePicker | ||
inputID="policyID" | ||
label={translate('workspace.common.workspace')} | ||
placeholder={translate('newRoomPage.selectAWorkspace')} | ||
items={workspaceOptions} | ||
onValueChange={setPolicyID} | ||
/> | ||
</View> | ||
{isPolicyAdmin && ( | ||
<View style={styles.mhn5}> | ||
<Form | ||
formID={ONYXKEYS.FORMS.NEW_ROOM_FORM} | ||
submitButtonText={translate('newRoomPage.createRoom')} | ||
style={[styles.mh5, styles.flexGrow1]} | ||
validate={validate} | ||
onSubmit={submit} | ||
enabledWhenOffline | ||
> | ||
<View style={styles.mb5}> | ||
<RoomNameInput | ||
ref={(el) => (roomNameInputRef.current = el)} | ||
inputID="roomName" | ||
isFocused={props.isFocused} | ||
shouldDelayFocus | ||
autoFocus | ||
/> | ||
</View> | ||
<View style={styles.mb5}> | ||
<TextInput | ||
inputID="welcomeMessage" | ||
label={translate('welcomeMessagePage.welcomeMessageOptional')} | ||
accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')} | ||
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} | ||
autoGrowHeight | ||
maxLength={CONST.MAX_COMMENT_LENGTH} | ||
autoCapitalize="none" | ||
textAlignVertical="top" | ||
containerStyles={[styles.autoGrowHeightMultilineInput]} | ||
/> | ||
</View> | ||
<View style={[styles.mhn5]}> | ||
<ValuePicker | ||
inputID="policyID" | ||
label={translate('workspace.common.workspace')} | ||
placeholder={translate('newRoomPage.selectAWorkspace')} | ||
items={workspaceOptions} | ||
onValueChange={setPolicyID} | ||
/> | ||
</View> | ||
{isPolicyAdmin && ( | ||
<View style={styles.mhn5}> | ||
<ValuePicker | ||
inputID="writeCapability" | ||
label={translate('writeCapabilityPage.label')} | ||
items={writeCapabilityOptions} | ||
value={writeCapability} | ||
onValueChange={setWriteCapability} | ||
/> | ||
</View> | ||
)} | ||
<View style={[styles.mb1, styles.mhn5]}> | ||
<ValuePicker | ||
inputID="writeCapability" | ||
label={translate('writeCapabilityPage.label')} | ||
items={writeCapabilityOptions} | ||
value={writeCapability} | ||
onValueChange={setWriteCapability} | ||
inputID="visibility" | ||
label={translate('newRoomPage.visibility')} | ||
items={visibilityOptions} | ||
onValueChange={setVisibility} | ||
value={visibility} | ||
/> | ||
</View> | ||
)} | ||
<View style={[styles.mb1, styles.mhn5]}> | ||
<ValuePicker | ||
inputID="visibility" | ||
label={translate('newRoomPage.visibility')} | ||
items={visibilityOptions} | ||
onValueChange={setVisibility} | ||
value={visibility} | ||
/> | ||
</View> | ||
<Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text> | ||
</Form> | ||
</KeyboardAvoidingView> | ||
)} | ||
<Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text> | ||
</Form> | ||
</KeyboardAvoidingView> | ||
) : ( | ||
<> | ||
<BlockingView | ||
icon={Illustrations.ToddBehindCloud} | ||
iconWidth={variables.modalTopIconWidth} | ||
iconHeight={variables.modalTopIconHeight} | ||
title={translate('workspace.emptyWorkspace.notFound')} | ||
subtitle={translate('workspace.emptyWorkspace.description')} | ||
shouldShowLink={false} | ||
/> | ||
<Button | ||
success | ||
text={translate('footer.learnMore')} | ||
onPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)} | ||
style={[styles.mh5, styles.mb5]} | ||
/> | ||
</> | ||
) | ||
} | ||
</ScreenWrapper> | ||
</FullPageNotFoundView> | ||
); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please revert this commit