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.

Sign up for GitHub

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

Add new blocking view for new room page #30051

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
eab7290
add new blocking view for new room page
dukenv0307 Oct 20, 2023
299a60c
fix lint
dukenv0307 Oct 20, 2023
5e4f72e
revert hard code
dukenv0307 Oct 24, 2023
dba11e8
Merge branch 'main' into fix/27995
dukenv0307 Oct 24, 2023
d1e23ef
fix lint
dukenv0307 Oct 24, 2023
f633aa2
merge main
dukenv0307 Oct 26, 2023
587a390
merge main
dukenv0307 Oct 30, 2023
70fec0f
fix lint
dukenv0307 Oct 30, 2023
dac71e2
Merge branch 'main' into fix/27995
dukenv0307 Oct 30, 2023
b5014c7
merge main
dukenv0307 Nov 15, 2023
6af325a
fix lint
dukenv0307 Nov 15, 2023
4590ea0
merge main
dukenv0307 Dec 5, 2023
fd71189
Merge branch 'main' into fix/27995
dukenv0307 Dec 8, 2023
388b7d1
Merge branch 'main' into fix/27995
dukenv0307 Dec 11, 2023
452a6e8
refactor component
dukenv0307 Dec 11, 2023
399635f
Merge branch 'main' into fix/27995
dukenv0307 Dec 12, 2023
133f9d2
reverse view
dukenv0307 Dec 12, 2023
ee544d8
Merge branch 'main' into fix/27995
dukenv0307 Dec 12, 2023
1c63ef7
fix crashes app
dukenv0307 Dec 13, 2023
dad8c0c
merge main
dukenv0307 Dec 13, 2023
5573367
Merge branch 'main' into fix/27995
dukenv0307 Dec 13, 2023
1f0e812
refactor empty view variable
dukenv0307 Dec 13, 2023
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1462,6 +1462,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 begin collaborating, create or join a workspace',
},
new: {
newWorkspace: 'New workspace',
Expand Down
2 changes: 2 additions & 0 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1483,6 +1483,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 comenzar a colaborar, cree o únase a un espacio de trabajo',
},
new: {
newWorkspace: 'Nuevo espacio de trabajo',
Expand Down
164 changes: 91 additions & 73 deletions src/pages/workspace/WorkspaceNewRoomPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import BlockingView from '@components/BlockingViews/BlockingView';
import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
import Button from '@components/Button';
import Form from '@components/Form';
import * as Illustrations from '@components/Icon/Illustrations';
import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
import OfflineIndicator from '@components/OfflineIndicator';
import RoomNameInput from '@components/RoomNameInput';
Expand All @@ -27,10 +30,10 @@ import * as ReportUtils from '@libs/ReportUtils';
import * as ValidationUtils from '@libs/ValidationUtils';
import useThemeStyles from '@styles/useThemeStyles';
import variables from '@styles/variables';
import * as App from '@userActions/App';
import * as Report from '@userActions/Report';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';

const propTypes = {
/** All reports shared with the user */
Expand Down Expand Up @@ -217,12 +220,7 @@ function WorkspaceNewRoomPage(props) {
const {inputCallbackRef} = useAutoFocusInput();

return (
<FullPageNotFoundView
shouldShow={!Permissions.canUsePolicyRooms(props.betas) || !workspaceOptions.length}
shouldShowBackButton={false}
linkKey="workspace.emptyWorkspace.title"
onLinkPress={() => App.createWorkspaceWithPolicyDraftAndNavigateToIt()}
>
<FullPageNotFoundView shouldShow={!Permissions.canUsePolicyRooms(props.betas)}>
<ScreenWrapper
shouldEnableKeyboardAvoidingView={false}
includeSafeAreaPaddingBottom={isOffline}
Expand All @@ -231,76 +229,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 •
edited
Loading

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={inputCallbackRef}
inputID="roomName"
isFocused={props.isFocused}
shouldDelayFocus
autoFocus
/>
</View>
<View style={styles.mb5}>
<TextInput
inputID="welcomeMessage"
label={translate('welcomeMessagePage.welcomeMessageOptional')}
accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
role={CONST.ACCESSIBILITY_ROLE.TEXT}
autoGrowHeight
maxLength={CONST.MAX_COMMENT_LENGTH}
autoCapitalize="none"
containerStyles={[styles.autoGrowHeightMultilineInput]}
/>
</View>
<View style={[styles.mhn5]}>
<ValuePicker
inputID="policyID"
label={translate('workspace.common.workspace')}
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={inputCallbackRef}
inputID="roomName"
isFocused={props.isFocused}
shouldDelayFocus
autoFocus
/>
</View>
<View style={styles.mb5}>
<TextInput
inputID="welcomeMessage"
label={translate('welcomeMessagePage.welcomeMessageOptional')}
accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
role={CONST.ACCESSIBILITY_ROLE.TEXT}
autoGrowHeight
maxLength={CONST.MAX_COMMENT_LENGTH}
autoCapitalize="none"
containerStyles={[styles.autoGrowHeightMultilineInput]}
/>
</View>
<View style={[styles.mhn5]}>
<ValuePicker
inputID="policyID"
label={translate('workspace.common.workspace')}
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>
{isSmallScreenWidth && <OfflineIndicator />}
</KeyboardAvoidingView>
)}
<Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
</Form>
{isSmallScreenWidth && <OfflineIndicator />}
</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]}
/>
{isSmallScreenWidth && <OfflineIndicator />}
</>
)
}
</ScreenWrapper>
</FullPageNotFoundView>
);
Expand Down
Loading