Update workspace switcher to look and act more like a filter

[jamesdeanexpensify]

Background

Coming from this long convo, we'd like to update the workspace switcher to look and act more like a filter.

Problem

The current workspace chat switcher has the "Everything" > "Expensify" selection as its default, which is unnecessary in general (especially when you don't have any workspaces) and takes up valuable real estate.

Solution

• Remove the "Everything" > "Expensify" section of the workspace switcher completely. Showing everything both on and off workspace will just be the default of the product.
• Since showing everything both on and off workspace will now be the default of the product, the workspace switcher should default to no workspaces selected in the switcher (which means it's showing everything).
  • The closed state of the switch should appear the same as it does now when "Everything > Expensify" is selected.
• Selecting a given workspace will filter only for that workspace.
  • The closed state of the switcher should appear the same as it does now when a workspace is selected.
• Note: If multiple workspaces exist, only allow for filtering on one workspace at a time. Don't allow multi-select.

Screenshots

Here's what we want the finished product to look like:

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[nkdengineer]

Proposal

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

Update workspace switcher to look and act more like a filter

What is the root cause of that problem?

new feature

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

1. Change translation key title here to "Filter by workspace"

App/src/languages/en.ts

Line 3641 in 992e5d4

headerTitle: 'Choose a workspace',

2. Remove every thing section here

App/src/pages/WorkspaceSwitcherPage/index.tsx

Lines 170 to 186 in 992e5d4

	<View style={[styles.ph5, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mb1]}>
	<Text
	style={styles.label}
	color={theme.textSupporting}
	>
	{translate('workspace.switcher.everythingSection')}
	</Text>
	</View>
	<UserListItem
	item={defaultPolicy}
	isFocused={activeWorkspaceID === undefined}
	showTooltip={false}
	onSelectRow={() => selectPolicy(defaultPolicy)}
	pressableStyle={styles.flexRow}
	shouldSyncFocus={false}
	/>
	<WorkspacesSectionHeader shouldShowCreateWorkspaceIcon={!shouldShowCreateWorkspace} />

3. Update onSelectRow function in SelectionList

4. Add new button Clear filter

What alternative solutions did you explore? (Optional)

NA

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-11-15 20:18:58 UTC.

Proposal


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

Update workspace switcher to look and act more like a filter

What is the root cause of that problem?

Feature update

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


• Remove header text UserListItem & WorkspacesSectionHeader.
  

  App/src/pages/WorkspaceSwitcherPage/index.tsx

  Lines 170 to 186 in 992e5d4

  	<View style={[styles.ph5, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mb1]}>
  	<Text
  	style={styles.label}
  	color={theme.textSupporting}
  	>
  	{translate('workspace.switcher.everythingSection')}
  	</Text>
  	</View>
  	<UserListItem
  	item={defaultPolicy}
  	isFocused={activeWorkspaceID === undefined}
  	showTooltip={false}
  	onSelectRow={() => selectPolicy(defaultPolicy)}
  	pressableStyle={styles.flexRow}
  	shouldSyncFocus={false}
  	/>
  	<WorkspacesSectionHeader shouldShowCreateWorkspaceIcon={!shouldShowCreateWorkspace} />

• Add confirm button props to SelectionList.

                        showConfirmButton
                        confirmButtonText={'Clear filter'}
                        onConfirm={() => selectPolicy(defaultPolicy)}

• We need to add the translation for 'Clear filter' and update the translation for workspace.switcher.headerTitle.
• We also need to introduce a prop in BaseSelectionList, to overwrite the success prop value.
  

  App/src/components/SelectionList/BaseSelectionList.tsx

  Lines 819 to 833 in 992e5d4

  	{showConfirmButton && (
  	<FixedFooter style={[styles.mtAuto]}>
  	<Button
  	success
  	large
  	style={[styles.w100]}
  	text={confirmButtonText || translate('common.confirm')}
  	onPress={onConfirm}
  	pressOnEnter
  	enterKeyEventListenerPriority={1}
  	/>
  	</FixedFooter>
  	)}
  	{!!footerContent && <FixedFooter style={[styles.mtAuto]}>{footerContent}</FixedFooter>}
  	</View>

What alternative solutions did you explore? (Optional)

Result