opencollective icon indicating copy to clipboard operation
opencollective copied to clipboard

Refactor expense process buttons

Open Betree opened this issue 2 years ago • 1 comments

While trying to iterate on https://github.com/opencollective/opencollective-frontend/pull/8700, I struggled with code duplication and inconsistent logic to check permissions between the "More actions" button, the Admin Status Tag dropdown and the regular process expense buttons.

The current architecture is error-prone and unclear, leading to issues such as https://github.com/opencollective/opencollective/issues/6517 and hacky workarounds such as this one made to display the "Mark as incomplete" action in the dropdown.

Proposal

  1. Unify all actions under an ExpenseProcessActions component.
    • Takes a Container prop to render the action either as a button or a list item action
    • Takes an actions prop to define which actions should be displayed
    • Should export a partitionExpenseActions(expense: Expense, context: 'HOST' | 'COLLECTIVE') helper returning a tuple like: [actions, moreActions]. Example: [['APPROVE'], ['REJECT', 'MARK_AS_SPAM']].
  2. Update the expenses list to use this new component, both for the admin tags and the process buttons on each item.
  3. Update the expense summary to use this new component, both for the "More actions" button and the process buttons

A minimal example of how this would work:

const [actions, moreActions] = partitionExpenseActions(expense, 'HOST');
return (
  <ExpenseItem>
    <Flex justifyContent="space-between">
      {expense.description}
      <ExpenseStatusTag
        tooltip={() => (
          <ExpenseProcessActions expense={expense} actions={moreActions} container={ListAction} />    
        )}
      />
    </Flex>
    <ExpenseButtons>
      <ExpenseProcessActions expense={expense} actions={actions} container={ButtonAction} />
    </ExpenseButtons>
  </ExpenseItem>
)

Betree avatar May 10 '23 07:05 Betree

Let's see how we could re-use the GetActions pattern implemented by @gustavlrsn in https://github.com/opencollective/opencollective-frontend/pull/10346 for this one.

Betree avatar May 03 '24 07:05 Betree