Skip to content

feat: add search bar to Workspace list page #63414

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
arosiclair merged 5 commits into from
Jun 6, 2025
Merged

feat: add search bar to Workspace list page #63414

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0daa3df
feat: add search bar to Workspace list page
daledah Jun 4, 2025
b487ed1
fix: hide header on empty search
daledah Jun 4, 2025
2b50b5a
Merge branch 'main' into fix/62395
daledah Jun 5, 2025
921a1bf
feat: apply suggestions
daledah Jun 5, 2025
d591cf9
fix: sort function
daledah Jun 5, 2025
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
99 changes: 55 additions & 44 deletions src/pages/workspace/WorkspacesListPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import type {PopoverMenuItem} from '@components/PopoverMenu';
import {PressableWithoutFeedback} from '@components/Pressable';
import ScreenWrapper from '@components/ScreenWrapper';
import ScrollView from '@components/ScrollView';
import SearchBar from '@components/SearchBar';
import type {ListItem} from '@components/SelectionList/types';
import SupportalActionRestrictedModal from '@components/SupportalActionRestrictedModal';
import Text from '@components/Text';
import useCardFeeds from '@hooks/useCardFeeds';
Expand All @@ -29,6 +31,7 @@ import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import usePayAndDowngrade from '@hooks/usePayAndDowngrade';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useSearchResults from '@hooks/useSearchResults';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import {isConnectionInProgress} from '@libs/actions/connections';
Expand All @@ -54,7 +57,8 @@ import type {PolicyDetailsForNonMembers} from '@src/types/onyx/Policy';
import {isEmptyObject} from '@src/types/utils/EmptyObject';
import WorkspacesListRow from './WorkspacesListRow';

type WorkspaceItem = Required<Pick<MenuItemProps, 'title' | 'disabled'>> &
type WorkspaceItem = ListItem &
Required<Pick<MenuItemProps, 'title' | 'disabled'>> &
Pick<MenuItemProps, 'brickRoadIndicator' | 'iconFill' | 'fallbackIcon'> &
Pick<OfflineWithFeedbackProps, 'errors' | 'pendingAction'> &
Pick<PolicyType, 'role' | 'type' | 'ownerAccountID' | 'employeeList'> & {
Expand Down Expand Up @@ -110,8 +114,6 @@ function dismissWorkspaceError(policyID: string, pendingAction: OnyxCommon.Pendi
clearErrors(policyID);
}

const stickyHeaderIndices = [0];

function WorkspacesListPage() {
const theme = useTheme();
const styles = useThemeStyles();
Expand Down Expand Up @@ -316,42 +318,6 @@ function WorkspacesListPage() {
],
);

const listHeaderComponent = useCallback(() => {
if (isLessThanMediumScreen) {
return <View style={styles.mt2} />;
}

return (
<View style={[styles.flexRow, styles.gap5, styles.pt2, styles.pb3, styles.pr5, styles.pl10, styles.appBG]}>
<View style={[styles.flexRow, styles.flex2]}>
<Text
numberOfLines={1}
style={[styles.flexGrow1, styles.textLabelSupporting]}
>
{translate('workspace.common.workspaceName')}
</Text>
</View>
<View style={[styles.flexRow, styles.flex1, styles.workspaceOwnerSectionTitle, styles.workspaceOwnerSectionMinWidth]}>
<Text
numberOfLines={1}
style={[styles.flexGrow1, styles.textLabelSupporting]}
>
{translate('workspace.common.workspaceOwner')}
</Text>
</View>
<View style={[styles.flexRow, styles.flex1, styles.workspaceTypeSectionTitle]}>
<Text
numberOfLines={1}
style={[styles.flexGrow1, styles.textLabelSupporting]}
>
{translate('workspace.common.workspaceType')}
</Text>
</View>
<View style={[styles.workspaceRightColumn, styles.mr2]} />
</View>
);
}, [isLessThanMediumScreen, styles, translate]);

const policyRooms = useMemo(() => {
if (!reports || isEmptyObject(reports)) {
return;
Expand Down Expand Up @@ -422,7 +388,7 @@ function WorkspacesListPage() {
fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
policyID: id,
role: CONST.POLICY.ROLE.USER,
errors: null,
errors: undefined,
action: () => null,
dismissError: () => null,
isJoinRequestPending: true,
Expand Down Expand Up @@ -454,10 +420,56 @@ function WorkspacesListPage() {
type: policy.type,
employeeList: policy.employeeList,
};
})
.sort((a, b) => localeCompare(a.title, b.title));
});
}, [reimbursementAccount?.errors, policies, isOffline, session?.email, allConnectionSyncProgresses, theme.textLight, policyRooms, navigateToWorkspace]);

const filterWorkspace = useCallback((workspace: WorkspaceItem, inputValue: string) => workspace.title.toLowerCase().includes(inputValue), []);
const sortWorkspace = useCallback((workspaceItems: WorkspaceItem[]) => workspaceItems.sort((a, b) => localeCompare(a.title, b.title)), []);
const [inputValue, setInputValue, filteredWorkspaces] = useSearchResults(workspaces, filterWorkspace, sortWorkspace);

const listHeaderComponent = (
<>
{isLessThanMediumScreen && <View style={styles.mt3} />}
{workspaces.length > CONST.SEARCH_ITEM_LIMIT && (
<SearchBar
label="Find workspace"

@shubham1206agra shubham1206agra Jun 10, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@daledah Why aren't we using localised label here? This looks like a regression.

@daledah daledah Jun 10, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Oh yeah I didn't realised that, will open a followup right away.

@daledah daledah Jun 10, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Added the fix in #63861

inputValue={inputValue}
onChangeText={setInputValue}
shouldShowEmptyState={filteredWorkspaces.length === 0 && inputValue.length > 0}
/>
)}
{!isLessThanMediumScreen && filteredWorkspaces.length > 0 && (
<View style={[styles.flexRow, styles.gap5, styles.pt2, styles.pb3, styles.pr5, styles.pl10, styles.appBG]}>
<View style={[styles.flexRow, styles.flex2]}>
<Text
numberOfLines={1}
style={[styles.flexGrow1, styles.textLabelSupporting]}
>
{translate('workspace.common.workspaceName')}
</Text>
</View>
<View style={[styles.flexRow, styles.flex1, styles.workspaceOwnerSectionTitle, styles.workspaceOwnerSectionMinWidth]}>
<Text
numberOfLines={1}
style={[styles.flexGrow1, styles.textLabelSupporting]}
>
{translate('workspace.common.workspaceOwner')}
</Text>
</View>
<View style={[styles.flexRow, styles.flex1, styles.workspaceTypeSectionTitle]}>
<Text
numberOfLines={1}
style={[styles.flexGrow1, styles.textLabelSupporting]}
>
{translate('workspace.common.workspaceType')}
</Text>
</View>
<View style={[styles.workspaceRightColumn, styles.mr2]} />
</View>
)}
</>
);

const getHeaderButton = () => (
<Button
accessibilityLabel={translate('workspace.new.newWorkspace')}
Expand Down Expand Up @@ -526,10 +538,9 @@ function WorkspacesListPage() {
<TopBar breadcrumbLabel={translate('common.workspaces')}>{!shouldUseNarrowLayout && <View style={[styles.pr2]}>{getHeaderButton()}</View>}</TopBar>
{shouldUseNarrowLayout && <View style={[styles.ph5, styles.pt2]}>{getHeaderButton()}</View>}
<FlatList
data={workspaces}
data={filteredWorkspaces}
renderItem={getMenuItem}
ListHeaderComponent={listHeaderComponent}
stickyHeaderIndices={stickyHeaderIndices}
/>
</View>
<ConfirmModal
Expand Down