feat: photo form field redesign

[PeterBaker0]

feat: photo form field redesign

JIRA Ticket

BSS-528

BSS-527

Description

Redesigns the photo form field visually to

• When there are no photos attached make it clearer that the user needs to add photos and make the button more prominent
• When there are photos attached, improve the styling and scaling of the photo gallery, refining the on click popup preview with improved button visibility and image scaling
• Make the delete image button more prominent
• Make the add a new photo button when there are existing images more prominent (rather than take photo button)
• Improve un-downloaded attachment user help

And makes some targeted refactor to the actual code i.e. removes the deprecated atob usage.

Also improves un-downloaded attachment user help by providing a deep link to the settings tab. Introduces a new fully typed custom hook for managing query string params. E.g.

const {params, setParam} = useQueryParams<{tab: TabIndex}>({
    tab: {
      key: ROUTES.INDIVIDUAL_NOTEBOOK_ROUTE_TAB_Q,
      defaultValue: 'records',
    },
  });

In the above you are given a type safe interface into params with a useState style interface. This automatically updates the query string upon change.

How to Test

Add photos, remove them, click to preview them. Publish record with photos, then login with different user and browser, and see the un-downloaded attachment behaviour.

Additional Information

Testing this exposed an existing bug around draft saving and record publishing when editing forms with existing un-downloaded attachments. @stevecassidy has created a JIRA ticket to track this issue.

Checklist

• I have confirmed all commits have been signed.
• I have added JSDoc style comments to any new functions or classes.
• Relevant documentation such as READMEs, guides, and class comments are updated.

[stevecassidy]

All good apart from comment on the size of thumbnails.