[$500] Use disabled cursor on pending-deletion workspace

[roryabraham]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Sign into a new account.
2. Create a workspace.
3. Go offline.
4. Open the workspace Settings -> Workspace
5. Click on the "three dots menu", and select Delete Workspace
6. Confirm the deletion of the workspace.
7. Open the settings menu again.
8. Hover over the workspace, which should be displayed with strikethrough.

Expected Result:

You can't click on this menu item anymore, so the cursor should adopt the "not-allowed" cursor style: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

Actual Result:

The cursor remains as a mouse.

Workaround:

n/a

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number:
Reproducible in staging?:
Reproducible in production?:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by: @roryabraham
Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @kevinksullivan (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[melvin-bot]

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

[aimane-chnaif]

Proposal

https://github.com/Expensify/App/blob/main/src/components/MenuItem.js#L58-L76

        <Pressable
            onPress={(e) => {
                if (props.disabled) {
                    return;
                }

                if (e && e.type === 'click') {
                    e.currentTarget.blur();
                }

                props.onPress(e);
            }}
            style={({hovered, pressed}) => ([
                styles.popoverMenuItem,
                StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive)),
                ..._.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle],
+               props.disabled && {cursor: 'not-allowed'},
            ])}
-           disabled={props.disabled}
        >

• why disabled={props.disabled} should be removed?
  if disabled=true, it disables all pointer interactions so it's impossible to change cursor pointer on hover (reference: https://necolas.github.io/react-native-web/docs/pressable/)
• Does it cause any regression?
  Nothing (both press behavior and style). Thanks to these codes:

            onPress={(e) => {
                if (props.disabled) {
                    return;
                }

                StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, **props.disabled**, props.interactive)),

App/src/libs/getButtonState.js

Lines 13 to 20 in df5d38a

	export default function (isActive = false, isPressed = false, isComplete = false, isDisabled = false, isInteractive = true) {
	if (!isInteractive) {
	return CONST.BUTTON_STATES.DEFAULT;
	}
	if (isDisabled) {
	return CONST.BUTTON_STATES.DISABLED;
	}

[kevinksullivan]

https://www.upwork.com/jobs/~01622e11116ab954f9