TP_UI - Issues 137 & 148 - Adds image upload component to Profile Page

[wijohnst]

FP_UI - #137 - Add Upload Component to Profile Page

FP_UI - #138 - Adds PhotoUpload story to ProfileHeader component

TL/DR
This PR adds an Upload input to the Profile Page when a user clicks the edit profile picture icon. This input will only accept image files. Currently this upload will only print a confirmation message to the console when an image is selected. Uploading the image to AWS S3 will be implemented at a later date when it is unblocked on the backend.

This PR also adds additional controls to the Profile Page. These include:

• User can cancel photo upload
• User can cancel edit profile action

Screen capture, additional cancel action clicks

Overview of Changes
ProfilePage.tsx

• Adds top-level state for conditional rendering in child component
• Adds conditional check that data exists before rendering
• Adds onCancelEdit and onCancelPhotoUploadClick event handlers

Upload.tsx

• Adds testId prop for custom test ids

ProfilePageRender.tsx

• Adds isPhotoUpload prop
• Conditionally renders input when isPhotoUpload is true
• Adds onCancelEditClick and onCancelPhotoUploadClick props

ProfilePageRender.stories.tsx

• Adds UploadPhoto story

ProfilePageRender.test.tsx

• Adds associated tests

CTALink.tsx

• Adds hideUnderline prop

CTALink.style.ts

• Adds conditional styling for hiding underline

CTALink.stories.tsx

• Adds HideUnderline story

ProfileHeader.tsx

• Adds photoUpload prop
• Conditionally render icon based on isPhotoUpload prop

ProfileHeader.stories.tsx

• Adds PhotoUpload story

Edit.tsx

• Adds CTA Link

Edit.style.tsx

• Updates styling

[wijohnst]

Closes #137

[wijohnst]

Closes #87

[wijohnst]

Closes #153

[wijohnst]

Left a test comment.

[Jessicawyt]

Looks good.

[wijohnst]

Self Review

[willcary]

One question and one small comment:

• How were you viewing the edit profile page for the screen capture provided? I couldn't find a way to view it like that other than altering the conditional in ProfilePage.tsx. Storybook seems to provide the aesthetics but not the functionality.
• Nit: the 'cancel' CTALink below the submit button might look better with some space between it and the EditProfileForm component. Feel free to disregard if that is the preferred look you're going for.

[wijohnst]

@willcary

Great question. I can view the edit profile page because I am also running the backend locally. This is actually one of the big problems that we still need to address (with Docker containers?). Basically, how can we securely share the backend in an open source project? The BE code requires a local env file that has a lot of passwords / sensitive data and I'm wary of sharing it outright. Perhaps with Docker we could make things more secure and easier to spin up locally for contributors.

[willcary]

@wijohnst

Ahh I see. Definitely better to keep that local or figure out a secure way to handle it. I've never used Docker but I know its very popular these days. Worth looking into.