[Hold for #395046] [Search v1] [$500] Add a search bar on the workspaces list

[roryabraham]

coming from https://expensify.slack.com/archives/C01GTK53T8Q/p1711147247599549...

Problem

If you have many workspaces on your workspaces list, it can be hard to find a particular one.

Solution

Add a search bar to filter the workspaces list.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016fc1028e9b86cc67
• Upwork Job ID: 1771337546180210688
• Last Price Increase: 2024-03-30
• Automatic offers:
• GandalfGwaihir | Contributor | 0

Issue Owner

Current Issue Owner: @GandalfGwaihir

[melvin-bot]

Triggered auto assignment to @sonialiap (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~016fc1028e9b86cc67

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

[hayes102]

Hi Rory, can i make a proposal for this one? or is it already taken?

[melvin-bot]

📣 @hayes102! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add a search bar on the workspaces list

What is the root cause of that problem?

This is a new feature

What changes do you think we should make in order to solve the problem?

We can re-use the filter logic in WorkspaceSwitcherPage to filter the workspace in WorkspaceListPage

1. Create a state for search term

const [searchTerm, setSearchTerm] = useState('');

2. Create a textInput component

const textInput = (
        <TextInput 
          defaultValue={searchTerm}
          onChangeText={(value) => {
              setSearchTerm(value);
          }}
          selectTextOnFocus
          spellCheck={false}
          iconLeft={MagnifyingGlass}
          placeholder={translate('workspace.switcher.placeholder')}
      />
  )

• Note: this is the main idea, other logics like focus, blur, ... of TextInput can be done on the PR

3. Update listHeaderComponent to include the search bar

const shouldShowTextInput = workspaces.length >= CONST.WORKSPACE_SWITCHER.MINIMUM_WORKSPACES_TO_SHOW_SEARCH;
const listHeaderComponent = useCallback(() => {
  const headerContent = isLessThanMediumScreen ? (
      <View style={styles.mt5} />
  ) : (
      <View style={[styles.flexRow, styles.gap5, styles.p5, styles.pl10, styles.appBG]}>
          {filteredAndSortedUserWorkspaces.length > 0 ? (
              <>
                  <View style={[styles.flexRow, styles.flex1]}>
                      <Text
                          numberOfLines={1}
                          style={[styles.flexGrow1, styles.textLabelSupporting]}
                      >
                          {translate('workspace.common.workspaceName')}
                      </Text>
                  </View>
                  <View style={[styles.flexRow, styles.flex1, styles.workspaceOwnerSectionTitle]}>
                      <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.ml10, styles.mr2]} />
              </>
          ) : (
              <Text>{translate('common.noResultsFound')}</Text>
          )}
      </View>
  );
  return (
      <>
          <View style={[styles.gap5, styles.p5, styles.pl10, styles.appBG]}>{shouldShowTextInput && textInput}</View>
          {headerContent}
      </>
  );
}, [isLessThanMediumScreen, styles, translate, shouldShowTextInput, filteredAndSortedUserWorkspaces.length]);

4. Create a filter workspace variable, re-use the logic here

const sortWorkspacesBySelected = (workspace1: WorkspaceItem, workspace2: WorkspaceItem, selectedWorkspaceID: string | undefined): number => {
    if (workspace1.policyID === selectedWorkspaceID) {
        return -1;
    }
    if (workspace2.policyID === selectedWorkspaceID) {
        return 1;
    }
    return workspace1.title?.toLowerCase().localeCompare(workspace2.title?.toLowerCase() ?? '') ?? 0;
};
const filteredAndSortedUserWorkspaces = useMemo(
    () =>
    workspaces
            .filter((policy) => policy.title?.toLowerCase().includes(searchTerm?.toLowerCase() ?? ''))
            .sort((policy1, policy2) => sortWorkspacesBySelected(policy1, policy2, activeWorkspaceID)),
    [searchTerm, workspaces, activeWorkspaceID],
);

5. Pass filteredAndSortedUserWorkspaces as the data of FlatList

data={filteredAndSortedUserWorkspaces}

App/src/pages/workspace/WorkspacesListPage.tsx

Line 410 in 191d932

data={workspaces}

What alternative solutions did you explore? (Optional)

NA

Result

Screen.Recording.2024-03-23.at.10.55.20.mov

[nayabatir1]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add search is workspace list

What is the root cause of that problem?

This is a new feature

What changes do you think we should make in order to solve the problem?

Added search bar in workspace list. Based on user input it will filter the list of workspace.

Header Component

This is draft structure for demo purpose, will look for reusable component if any once this proposal gets accepted.

Filter workspace logic

Instead of directly filtering on workspaces, I'm creating 2nd memoize variable to filter as if workspace is empty, create workspace section will be shown. Using `useDeferredValue` to smoothly update UI.

Demo video

Screen.Recording.2024-03-23.at.14.11.23.mov

What alternative solutions did you explore? (Optional)

N.A.

[allgandalf]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add a search bar on the workspaces list

What is the root cause of that problem?

Feature Request

What changes do you think we should make in order to solve the problem?

Firstly, We don't need to create everything from scratch, we have major logic to filter workspaces in the Workspace Switcher LHN itself:
For the Logic part, We can directly use the logic to filter workspaces from here:

App/src/pages/WorkspaceSwitcherPage.tsx

Lines 147 to 153 in 191d932

	const filteredAndSortedUserWorkspaces = useMemo(
	() =>
	usersWorkspaces
	.filter((policy) => policy.text?.toLowerCase().includes(searchTerm?.toLowerCase() ?? ''))
	.sort((policy1, policy2) => sortWorkspacesBySelected(policy1, policy2, activeWorkspaceID)),
	[searchTerm, usersWorkspaces, activeWorkspaceID],
	);

Then we should define a TextInput which will be used to enter user data, this can be taken fromBaseOptionsSelector :

App/src/components/OptionsSelector/BaseOptionsSelector.js

Lines 506 to 532 in 2003844

	const textInput = (
	<TextInput
	ref={(el) => (this.textInput = el)}
	label={this.props.textInputLabel}
	accessibilityLabel={this.props.textInputLabel}
	role={CONST.ROLE.PRESENTATION}
	onChangeText={this.debouncedUpdateSearchValue}
	errorText={this.state.errorMessage}
	onSubmitEditing={this.selectFocusedOption}
	placeholder={this.props.placeholderText}
	maxLength={this.props.maxLength + CONST.ADDITIONAL_ALLOWED_CHARACTERS}
	keyboardType={this.props.keyboardType}
	onBlur={(e) => {
	if (!this.props.shouldPreventDefaultFocusOnSelectRow) {
	return;
	}
	this.relatedTarget = e.relatedTarget;
	}}
	selectTextOnFocus
	blurOnSubmit={Boolean(this.state.allOptions.length)}
	spellCheck={false}
	shouldInterceptSwipe={this.props.shouldTextInputInterceptSwipe}
	isLoading={this.props.isLoadingNewOptions}
	iconLeft={this.props.textIconLeft}
	testID="options-selector-input"
	/>
	);

Over here we also need to define a new Place Holder text for workspace list:
workspaceSearch: 'Search Workspace'

Then we need to add this TextInput in listHeaderComponent in WorkspacesListPage:

App/src/pages/workspace/WorkspacesListPage.tsx

Line 220 in 191d932

const listHeaderComponent = useCallback(() => {

And finally, Update the data parameter in FlatList to show the workspaces according to the filtered values

App/src/pages/workspace/WorkspacesListPage.tsx

Line 410 in 191d932

data={workspaces}

Note: We should also add a No results found for inputs which do not match workspace names

Test Branch: https://github.com/GandalfGwaihir/App/tree/issue38854

[eVoloshchak]

This is a feature request rather than a bug, so the first proposal to correctly explain the general idea of how to implement the feature - is a winning proposal. Extensive code diffs aren't needed (Source), the exact details of the implementation can be worked out during the PR review

Based on that, I think we should proceed with @nkdengineer's proposal
🎀👀🎀 C+ reviewed!

[melvin-bot]

Current assignee @roryabraham is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[allgandalf]

hello @eVoloshchak , i actually had the first dibs here, context:

[wildan-m]

To prevent such situations, I suggest removing the 'Help Wanted' tag if the issue is specific to a particular individual. If the proposed assignment is unsatisfactory, then we can consider adding the tag to seek alternative solutions. I've experienced the same situation here 😆

[eVoloshchak]

i actually had the first dibs here, context:

@GandalfGwaihir, thanks for linking that!
In that case, @roryabraham, could you assign @GandalfGwaihir to this please?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

📣 @GandalfGwaihir 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[sonialiap]

@GandalfGwaihir all yours, looking forward to having a workspace search! 🙏

[trjExpensify]

I think we should park the breaks on this and wait for search v2 and introducing it consistently. We purposefully left it out of the v1 of the Workspaces page knowing we'd be working into a more holistic search design. CC: @Expensify/design

[shawnborton]

I agree with that.

[allgandalf]

damn , the updated code was ready for one 😢

[JmillsExpensify]

Agree with pausing this. It hasn't gone through our internal design process yet, though it will within the next 1-2 weeks, and at that point once we have alignment, we can pick this back up.

[trjExpensify]

Going to track it as part of [Search v1] for now to keep it in view, though I'll likely update this to wherever we go with Search v2.

[melvin-bot]

@eVoloshchak, @sonialiap, @roryabraham, @GandalfGwaihir Eep! 4 days overdue now. Issues have feelings too...

[eVoloshchak]

Not overdue, this is on HOLD

[melvin-bot]

@eVoloshchak, @sonialiap, @roryabraham, @GandalfGwaihir, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.

[sonialiap]

search v2 is being worked on here https://github.com/Expensify/Expensify/issues/395046

[sonialiap]

Closing this out because it's a very long way from being implemented (slack)