Skip to content

fixes-37403 Workflows-If the first 2 options are enabled,cannot scroll to see the 3th option #38248

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

Merged
luacmartins merged 16 commits into from
Mar 22, 2024
Merged

fixes-37403 Workflows-If the first 2 options are enabled,cannot scroll to see the 3th option #38248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
1d55ee6
fixes the scroll issue
ishpaul777 Mar 13, 2024
cb5f762
lint fix
ishpaul777 Mar 13, 2024
e9b4b3f
Update src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
ishpaul777 Mar 14, 2024
a2ab478
remove redundant scrollview
ishpaul777 Mar 14, 2024
c4c9998
Merge branch 'main' into fix/issue-37403
ishpaul777 Mar 14, 2024
d0408b8
prettier diffs
ishpaul777 Mar 14, 2024
251c60b
fixes merge conflicts
ishpaul777 Mar 14, 2024
5fee8ce
prettier diffs
ishpaul777 Mar 14, 2024
c4317ec
Merge branch 'Expensify:main' into fix/issue-37403
ishpaul777 Mar 14, 2024
a9954f9
revert unncessary changes
ishpaul777 Mar 14, 2024
9f4cae7
removes redundant scrollview
ishpaul777 Mar 14, 2024
508ed43
checking merge comptibitlity
ishpaul777 Mar 14, 2024
03cd1b1
Merge branch 'Expensify:main' into fix/issue-37403
ishpaul777 Mar 20, 2024
388ad4e
Merge branch 'main' into fix/issue-37403
ishpaul777 Mar 22, 2024
5d8ec70
resolve conflicts
ishpaul777 Mar 22, 2024
7089a6c
resolves more conflict after merge
ishpaul777 Mar 22, 2024
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
235 changes: 116 additions & 119 deletions src/pages/workspace/WorkspaceProfilePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import ScrollView from '@components/ScrollView';
import Section from '@components/Section';
import Text from '@components/Text';
import useActiveWorkspace from '@hooks/useActiveWorkspace';
Expand Down Expand Up @@ -119,133 +118,131 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
icon={Illustrations.House}
>
{(hasVBA?: boolean) => (
<ScrollView>
<View style={[styles.flex1, styles.mt3, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
<Section
isCentralPane
title=""
>
<Image
style={StyleSheet.flatten([styles.wAuto, styles.h68, imageStyle])}
source={illustrations.WorkspaceProfile}
resizeMode="cover"
/>
<AvatarWithImagePicker
onViewPhotoPress={() => Navigation.navigate(ROUTES.WORKSPACE_AVATAR.getRoute(policy?.id ?? ''))}
source={policy?.avatar ?? ''}
size={CONST.AVATAR_SIZE.XLARGE}
avatarStyle={styles.avatarXLarge}
enablePreview
DefaultAvatar={DefaultAvatar}
type={CONST.ICON_TYPE_WORKSPACE}
fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
style={[
policy?.errorFields?.avatar ?? isSmallScreenWidth ? styles.mb1 : styles.mb3,
isSmallScreenWidth ? styles.mtn17 : styles.mtn20,
styles.alignItemsStart,
styles.sectionMenuItemTopDescription,
]}
editIconStyle={styles.smallEditIconWorkspace}
isUsingDefaultAvatar={!policy?.avatar ?? null}
onImageSelected={(file) => Policy.updateWorkspaceAvatar(policy?.id ?? '', file as File)}
onImageRemoved={() => Policy.deleteWorkspaceAvatar(policy?.id ?? '')}
editorMaskImage={Expensicons.ImageCropSquareMask}
pendingAction={policy?.pendingFields?.avatar}
errors={policy?.errorFields?.avatar}
onErrorClose={() => Policy.clearAvatarErrors(policy?.id ?? '')}
previewSource={UserUtils.getFullSizeAvatar(policy?.avatar ?? '')}
headerTitle={translate('workspace.common.workspaceAvatar')}
originalFileName={policy?.originalFileName}
<View style={[styles.flex1, styles.mt3, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
<Section
isCentralPane
title=""
>
<Image
style={StyleSheet.flatten([styles.wAuto, styles.h68, imageStyle])}
source={illustrations.WorkspaceProfile}
resizeMode="cover"
/>
<AvatarWithImagePicker
onViewPhotoPress={() => Navigation.navigate(ROUTES.WORKSPACE_AVATAR.getRoute(policy?.id ?? ''))}
source={policy?.avatar ?? ''}
size={CONST.AVATAR_SIZE.XLARGE}
avatarStyle={styles.avatarXLarge}
enablePreview
DefaultAvatar={DefaultAvatar}
type={CONST.ICON_TYPE_WORKSPACE}
fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
style={[
policy?.errorFields?.avatar ?? isSmallScreenWidth ? styles.mb1 : styles.mb3,
isSmallScreenWidth ? styles.mtn17 : styles.mtn20,
styles.alignItemsStart,
styles.sectionMenuItemTopDescription,
]}
editIconStyle={styles.smallEditIconWorkspace}
isUsingDefaultAvatar={!policy?.avatar ?? null}
onImageSelected={(file) => Policy.updateWorkspaceAvatar(policy?.id ?? '', file as File)}
onImageRemoved={() => Policy.deleteWorkspaceAvatar(policy?.id ?? '')}
editorMaskImage={Expensicons.ImageCropSquareMask}
pendingAction={policy?.pendingFields?.avatar}
errors={policy?.errorFields?.avatar}
onErrorClose={() => Policy.clearAvatarErrors(policy?.id ?? '')}
previewSource={UserUtils.getFullSizeAvatar(policy?.avatar ?? '')}
headerTitle={translate('workspace.common.workspaceAvatar')}
originalFileName={policy?.originalFileName}
disabled={readOnly}
disabledStyle={styles.cursorDefault}
errorRowStyles={styles.mt3}
/>
<OfflineWithFeedback pendingAction={policy?.pendingFields?.generalSettings}>
<MenuItemWithTopDescription
title={policyName}
titleStyle={styles.workspaceTitleStyle}
description={translate('workspace.editor.nameInputLabel')}
shouldShowRightIcon={!readOnly}
disabled={readOnly}
disabledStyle={styles.cursorDefault}
errorRowStyles={styles.mt3}
wrapperStyle={[styles.sectionMenuItemTopDescription, isSmallScreenWidth ? styles.mt3 : {}]}
onPress={onPressName}
shouldGreyOutWhenDisabled={false}
shouldUseDefaultCursorWhenDisabled
/>
<OfflineWithFeedback pendingAction={policy?.pendingFields?.generalSettings}>
</OfflineWithFeedback>
{(!StringUtils.isEmptyString(policy?.description ?? '') || !readOnly) && (
<OfflineWithFeedback
pendingAction={policy?.pendingFields?.description}
errors={ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.DESCRIPTION)}
onClose={() => Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.DESCRIPTION)}
>
<MenuItemWithTopDescription
title={policyName}
titleStyle={styles.workspaceTitleStyle}
description={translate('workspace.editor.nameInputLabel')}
title={policyDescription}
description={translate('workspace.editor.descriptionInputLabel')}
shouldShowRightIcon={!readOnly}
disabled={readOnly}
wrapperStyle={[styles.sectionMenuItemTopDescription, isSmallScreenWidth ? styles.mt3 : {}]}
onPress={onPressName}
wrapperStyle={styles.sectionMenuItemTopDescription}
onPress={onPressDescription}
shouldGreyOutWhenDisabled={false}
shouldUseDefaultCursorWhenDisabled
shouldRenderAsHTML
/>
</OfflineWithFeedback>
{(!StringUtils.isEmptyString(policy?.description ?? '') || !readOnly) && (
<OfflineWithFeedback
pendingAction={policy?.pendingFields?.description}
errors={ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.DESCRIPTION)}
onClose={() => Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.DESCRIPTION)}
>
<MenuItemWithTopDescription
title={policyDescription}
description={translate('workspace.editor.descriptionInputLabel')}
shouldShowRightIcon={!readOnly}
disabled={readOnly}
wrapperStyle={styles.sectionMenuItemTopDescription}
onPress={onPressDescription}
shouldGreyOutWhenDisabled={false}
shouldUseDefaultCursorWhenDisabled
shouldRenderAsHTML
/>
</OfflineWithFeedback>
)}
<OfflineWithFeedback
pendingAction={policy?.pendingFields?.generalSettings}
errors={ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.GENERAL_SETTINGS)}
onClose={() => Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.GENERAL_SETTINGS)}
errorRowStyles={[styles.mt2]}
>
<View>
<MenuItemWithTopDescription
title={formattedCurrency}
description={translate('workspace.editor.currencyInputLabel')}
shouldShowRightIcon={!readOnly}
disabled={hasVBA ? true : readOnly}
wrapperStyle={styles.sectionMenuItemTopDescription}
onPress={onPressCurrency}
shouldGreyOutWhenDisabled={false}
shouldUseDefaultCursorWhenDisabled
/>
<Text style={[styles.textLabel, styles.colorMuted, styles.mt1, styles.mh5, styles.sectionMenuItemTopDescription]}>
{hasVBA ? translate('workspace.editor.currencyInputDisabledText') : translate('workspace.editor.currencyInputHelpText')}
</Text>
</View>
</OfflineWithFeedback>
{!readOnly && (
<View style={[styles.flexRow, styles.mt6, styles.mnw120]}>
<Button
accessibilityLabel={translate('common.share')}
text={translate('common.share')}
onPress={onPressShare}
medium
icon={Expensicons.QrCode}
/>
<Button
accessibilityLabel={translate('common.delete')}
text={translate('common.delete')}
style={[styles.ml2]}
onPress={() => setIsDeleteModalOpen(true)}
medium
icon={Expensicons.Trashcan}
/>
</View>
)}
</Section>
<ConfirmModal
title={translate('common.delete')}
isVisible={isDeleteModalOpen}
onConfirm={confirmDeleteAndHideModal}
onCancel={() => setIsDeleteModalOpen(false)}
prompt={translate('workspace.common.deleteConfirmation')}
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
danger
/>
</View>
</ScrollView>
)}
<OfflineWithFeedback
pendingAction={policy?.pendingFields?.generalSettings}
errors={ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.GENERAL_SETTINGS)}
onClose={() => Policy.clearPolicyErrorField(policy?.id ?? '', CONST.POLICY.COLLECTION_KEYS.GENERAL_SETTINGS)}
errorRowStyles={[styles.mt2]}
>
<View>
<MenuItemWithTopDescription
title={formattedCurrency}
description={translate('workspace.editor.currencyInputLabel')}
shouldShowRightIcon={!readOnly}
disabled={hasVBA ? true : readOnly}
wrapperStyle={styles.sectionMenuItemTopDescription}
onPress={onPressCurrency}
shouldGreyOutWhenDisabled={false}
shouldUseDefaultCursorWhenDisabled
/>
<Text style={[styles.textLabel, styles.colorMuted, styles.mt1, styles.mh5, styles.sectionMenuItemTopDescription]}>
{hasVBA ? translate('workspace.editor.currencyInputDisabledText') : translate('workspace.editor.currencyInputHelpText')}
</Text>
</View>
</OfflineWithFeedback>
{!readOnly && (
<View style={[styles.flexRow, styles.mt6, styles.mnw120]}>
<Button
accessibilityLabel={translate('common.share')}
text={translate('common.share')}
onPress={onPressShare}
medium
icon={Expensicons.QrCode}
/>
<Button
accessibilityLabel={translate('common.delete')}
text={translate('common.delete')}
style={[styles.ml2]}
onPress={() => setIsDeleteModalOpen(true)}
medium
icon={Expensicons.Trashcan}
/>
</View>
)}
</Section>
<ConfirmModal
title={translate('common.delete')}
isVisible={isDeleteModalOpen}
onConfirm={confirmDeleteAndHideModal}
onCancel={() => setIsDeleteModalOpen(false)}
prompt={translate('workspace.common.deleteConfirmation')}
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
danger
/>
</View>
)}
</WorkspacePageWithSections>
);
Expand Down
16 changes: 8 additions & 8 deletions src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type {StackScreenProps} from '@react-navigation/stack';
import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {FlatList, View} from 'react-native';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import ConfirmModal from '@components/ConfirmModal';
Expand Down Expand Up @@ -243,8 +243,11 @@ function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, ses
session?.accountID,
]);

const renderOptionItem = ({item}: {item: ToggleSettingOptionRowProps}) => (
<View style={styles.mt7}>
const renderOptionItem = (item: ToggleSettingOptionRowProps, index: number) => (
<View
style={styles.mt7}
key={`toggleSettingOptionItem-${index}`}
>
<ToggleSettingOptionRow
icon={item.icon}
title={item.title}
Expand Down Expand Up @@ -277,6 +280,7 @@ function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, ses
shouldShowNotFoundPage={!isPaidGroupPolicy || !isPolicyAdmin}
shouldSkipVBBACall
isLoading={isLoading}
shouldUseScrollView
>
<View style={[styles.mt3, styles.textStrong, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
<Section
Expand All @@ -286,11 +290,7 @@ function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, ses
>
<View>
<Text style={[styles.mt3, styles.textSupporting]}>{translate('workflowsPage.workflowDescription')}</Text>
<FlatList
data={optionItems}
renderItem={renderOptionItem}
keyExtractor={(item: ToggleSettingOptionRowProps) => item.title}
/>
{optionItems.map(renderOptionItem)}
<ConfirmModal
title={translate('workspace.bankAccount.workspaceCurrency')}
isVisible={isCurrencyModalOpen}
Expand Down