feat/link-audit frontend

[jimvae]

Problem

As a user, I want to know what has changed on my link and by whom. This includes Link Status, Link Owner, Long URL and File Upload changes.

Relevant Links:
Notion story - User story and acceptance criteria
Backend - Backend tasks for this feature

Solution

• Add a modified Timeline component using @material-ui/lab
• Add new user redux states for link-audit (isFetchingLinkHistory, linkHistory and linkHistoryCount) for fetching link-audit information
• Add new drawer state (toggleLinkHistory) to facilitate toggling between link history and link details in the link drawer
• Add pagination to handle 10 entries per page
• Fix all ui / mobile responsive issues (see notion story for the initial bugs)

Screenshots

View Link History Button that goes from link details to link history

Link History Timeline to showcase different changes

Pagination

End to End Tests

• create new link -> validate a 'create' item in the link history
• disable link -> validate a new update entry on Link Status
• edit original long url -> validate a new update entry on Original Link
• transfer ownership -> validate a new update entry on Link Owner

Deploy Notes

New dependencies:

• "@material-ui/lab": "^4.0.0-alpha.61", : added this to use the Timeline component

When this dependency is updated in the future, there is a possibility that they shift some of the components to material-ui/core. This might lead to import errors which are easily fixable by changing the import source (easily caught during compilation)

[halfwhole]

generally lgtm, just mostly some nits!

would like to ask for your opinions on state management for link history - personally it seems a bit overkill to put the state for link history in the global redux store under UserState when it could be local to the LinkHistory component, but then there's also already an established pattern in the codebase of putting lots of things under the redux store. would it be better to follow this redux approach or try using a more local state here?

edit: also I just remembered something you mentioned before, where loading a new link history would temporarily display the previous stale link history before the new ones are fetched - local state should be able to help with that too by 'purging' link history state when unmounting the component

edit 2: also just saw feli's comments on figma regarding alignment - would the timeline alignment be something doable too?

[jimvae]

@halfwhole Thank you for the review! Amended most of them but would discuss with you in the office tmr about the changes related to the redux store

[halfwhole]

following a convo with @jimvae, we're good with using redux and following the current style for now - we can refactor the frontend to use other state management techniques another time!

[halfwhole]

lgtm!

[gweiying]

lgtm!