Skip to content
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

Merged
merged 22 commits into from
Dec 14, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/languages/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1422,6 +1422,8 @@ export default {
companyCards: 'Company credit cards',
reimbursements: 'Easy reimbursements',
},
notFound: 'No workspace found',
description: 'Rooms are a great place to discuss and work with multiple people. To message a room, create or join a workspace',
},
new: {
newWorkspace: 'New workspace',
Expand Down
2 changes: 2 additions & 0 deletions src/languages/es.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1443,6 +1443,8 @@ export default {
companyCards: 'Tarjetas de crédito corporativas',
reimbursements: 'Reembolsos fáciles',
},
notFound: 'No se encontró ningún espacio de trabajo',
description: 'Las salas son un gran lugar para discutir y trabajar con varias personas. Para enviar mensajes a una sala, crear o unirse a un espacio de trabajo',
},
new: {
newWorkspace: 'Nuevo espacio de trabajo',
Expand Down
1 change: 1 addition & 0 deletions src/libs/Permissions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import CONST from '../CONST';
import Beta from '../types/onyx/Beta';

function canUseAllBetas(betas: Beta[]): boolean {
return true;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please revert this commit

return betas?.includes(CONST.BETAS.ALL);
}

Expand Down
160 changes: 92 additions & 68 deletions src/pages/workspace/WorkspaceNewRoomPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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)}
Copy link
Contributor

Choose a reason for hiding this comment

The 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

Expand All @@ -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 ? (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks hard to read code. Because the children of <KeyboardAvoidingView are long, we have to scroll back and forth to read the empty view logic and main logic.

Do you have any idea to make it more readable? Thanks

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hoangzinh Updated.

Copy link
Contributor

Choose a reason for hiding this comment

The 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?

Copy link
Contributor Author

@dukenv0307 dukenv0307 Dec 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hoangzinh Do you think about lifting both views out?

Copy link
Contributor

Choose a reason for hiding this comment

The 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>
);
Expand Down
Loading