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

Jump to bottom

[Advanced Approval Workflows] Display empty state when the member list is empty #47848

Merged
merged 14 commits into from
Sep 2, 2024
Merged

[Advanced Approval Workflows] Display empty state when the member list is empty #47848

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e373048
Display empty state when the member list is empty
blazejkustra Aug 22, 2024
d7ecdfb
Fix lint
blazejkustra Aug 22, 2024
09222b7
Clean the code
blazejkustra Aug 22, 2024
3a3cac2
Update translation
blazejkustra Aug 22, 2024
465bab0
Improve empty state
blazejkustra Aug 26, 2024
683a892
Merge branch 'main' into approval-workflows/display-empty-state
blazejkustra Aug 28, 2024
e4bdec1
Update translations
blazejkustra Aug 28, 2024
f624b1c
Add turtle in shell icon
blazejkustra Aug 28, 2024
6c3f4c9
Add empty content view for expenses from page
blazejkustra Aug 28, 2024
4db199f
Add empty content view for approver page
blazejkustra Aug 28, 2024
eed5c85
Fix es translations
blazejkustra Aug 28, 2024
c1ce3ba
Fix the case when removing an approver that is in circular reference
blazejkustra Aug 28, 2024
68963bf
Merge branch 'main' into approval-workflows/display-empty-state
blazejkustra Aug 30, 2024
203cc5f
Use a different style for subtitle
blazejkustra Aug 30, 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
1 change: 1 addition & 0 deletions src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1356,6 +1356,7 @@ export default {
workflowsExpensesFromPage: {
title: 'Expenses from',
header: 'When the following members submit expenses:',
emptyMembersList: 'Nice job! All workspace members belong to an approval workflow.',
},
workflowsApproverPage: {
genericErrorMessage: "The approver couldn't be changed. Please try again or contact support.",
Expand Down
1 change: 1 addition & 0 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1363,6 +1363,7 @@ export default {
workflowsExpensesFromPage: {
title: 'Gastos de',
header: 'Cuando los siguientes miembros presenten gastos:',
emptyMembersList: '¡Buen trabajo! Todos los miembros del espacio de trabajo pertenecen a un flujo de aprobación.',
},
workflowsApproverPage: {
genericErrorMessage: 'El aprobador no pudo ser cambiado. Por favor, inténtelo de nuevo o contacte al soporte.',
Expand Down
14 changes: 7 additions & 7 deletions src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,8 @@ type WorkspaceWorkflowsApprovalsExpensesFromPageProps = WithPolicyAndFullscreenL
function WorkspaceWorkflowsApprovalsExpensesFromPage({policy, isLoadingReportData = true, route}: WorkspaceWorkflowsApprovalsExpensesFromPageProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
const [approvalWorkflow, approvalWorkflowMetadata] = useOnyx(ONYXKEYS.APPROVAL_WORKFLOW);
const [approvalWorkflow] = useOnyx(ONYXKEYS.APPROVAL_WORKFLOW);
const [selectedMembers, setSelectedMembers] = useState<SelectionListMember[]>([]);

// eslint-disable-next-line rulesdir/no-negated-variables
Expand Down Expand Up @@ -168,7 +167,8 @@ function WorkspaceWorkflowsApprovalsExpensesFromPage({policy, isLoadingReportDat
setSelectedMembers(isAlreadySelected ? selectedMembers.filter((selectedOption) => selectedOption.login !== member.login) : [...selectedMembers, {...member, isSelected: true}]);
};

const headerMessage = useMemo(() => (searchTerm && !sections[0].data.length ? translate('common.noResultsFound') : ''), [searchTerm, sections, translate]);
const isMembersListEmpty = !sections[0].data.length;
const headerMessage = useMemo(() => (searchTerm && isMembersListEmpty ? translate('common.noResultsFound') : ''), [searchTerm, isMembersListEmpty, translate]);

return (
<AccessOrNotFoundWrapper
Expand All @@ -178,7 +178,6 @@ function WorkspaceWorkflowsApprovalsExpensesFromPage({policy, isLoadingReportDat
<ScreenWrapper
includeSafeAreaPaddingBottom={false}
testID={WorkspaceWorkflowsApprovalsExpensesFromPage.displayName}
onEntryTransitionEnd={() => setDidScreenTransitionEnd(true)}
>
<FullPageNotFoundView
shouldShow={shouldShowNotFoundView}
Expand All @@ -191,19 +190,20 @@ function WorkspaceWorkflowsApprovalsExpensesFromPage({policy, isLoadingReportDat
onBackButtonPress={goBack}
/>
{approvalWorkflow?.action === CONST.APPROVAL_WORKFLOW.ACTION.CREATE && (
<Text style={[styles.textHeadlineH1, styles.mh5, styles.mv3]}>{translate('workflowsExpensesFromPage.header')}</Text>
<Text style={[styles.textHeadlineH1, styles.mh5, styles.mv3]}>
{translate(isMembersListEmpty ? 'workflowsExpensesFromPage.emptyMembersList' : 'workflowsExpensesFromPage.header')}
blazejkustra marked this conversation as resolved.
Show resolved Hide resolved
</Text>
)}
<SelectionList
canSelectMultiple
sections={sections}
ListItem={InviteMemberListItem}
textInputLabel={translate('selectionList.findMember')}
textInputLabel={isMembersListEmpty ? undefined : translate('selectionList.findMember')}
blazejkustra marked this conversation as resolved.
Show resolved Hide resolved
textInputValue={searchTerm}
onChangeText={setSearchTerm}
headerMessage={headerMessage}
onSelectRow={toggleMember}
showScrollIndicator
showLoadingPlaceholder={!didScreenTransitionEnd || approvalWorkflowMetadata.status === 'loading'}
shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
footerContent={nextButton}
/>
Expand Down
Loading