Add option to disable delete button if model has protected object #573
Conversation
Pull Request Test Coverage Report for Build 5932108690
💛 - Coveralls |
| Delete | ||
| </GuardedButton> | ||
| <Tooltip title={hasProtectedObject ? deleteDisabledTooltip : ''}> | ||
| <span> |
There was a problem hiding this comment.
Wrapping it in a <span> is necessary because tooltips don't show on disabled buttons
src/components/EditableCard.tsx
Outdated
| ModalComponent?: new (props: ISharedFormModalProps) => FormModal | FormDrawer; | ||
| deleteDisabledTooltip?: string; | ||
| onDelete?: (model: unknown) => Promise<any>; | ||
| protectedField?: string | null; |
There was a problem hiding this comment.
Can this be a boolean field? disableDelete or something and on the frontend you can just pass {!!payments}. I think that makes the prop a little more straight forward but also we would be able to use that prop for when we just want to disable the delete button for other reasons (i.e. disable if the user doesn't have the permission to delete.
There was a problem hiding this comment.
Each investment could have or not have payments, so we have to pass the field along with the model to EditableArrayCard so when it renders each EditableCard it can check whether that instance has payments or not. From inside coop-client we can't pass a boolean for each investment since the frontend only passes the model. Let me know if I'm understanding you correctly.
There was a problem hiding this comment.
In the future we could do a disableDelete for permissions since we could just disable the delete button for the entire EditableArrayCard
There was a problem hiding this comment.
this prop feels way too specific for the component i think. Do you think this is possible?
<EditableArrayCard
...
renderDelete={(investment) => investment.payments && investment.payments.length > 0}
...
/>
const enableDelete = renderDelete ? renderDelete(model) : true;
something like that... then we can just pass (investment) => false to the prop if we want to disable it for other reasons?
There was a problem hiding this comment.
also didnt realize that this was a array card! but i think that might work?!
There was a problem hiding this comment.
yeah agreed! I think passing the function is much better. updated!
| > | ||
| Delete | ||
| </GuardedButton> | ||
| <Tooltip title={isDeleteDisabled ? disabledDeleteTooltip : ''}> |
There was a problem hiding this comment.
if the button is disabled but the prop passed an empty string for disabledDeleteTooltip, does the tool tip render with an empty string or does not render at all?
There was a problem hiding this comment.
No tooltip is rendered when the string is empty!
JIRA: https://thatsmighty.atlassian.net/browse/PROD-506
CoOp pull request: https://github.com/mighty-justice/coop-client/pull/1198
Tested in Storybook (ended up removing the Storybook code, thought it might be overkill):
Also tested in CoOp:
