app-project: Add OrganizationLink to ProjectHeader and Hero components

[mcbouslog]

Package

• app-project

Linked Issue and/or Talk Post

• closes Links to related organization from project home page #3579

Describe your changes

• add fetchOrganization helper
• refactor getStaticPageProps with fetchOrganization
• add organization store
• add OrganizationLink to ProjectHeader
• add OrganizationLink to Hero's NarrowLayout and WideLayout
• add organization link to DropdownNav

How to Review

Helpful explanations that will make your reviewer happy:

• What Zooniverse project should my reviewer use to review UX?
  • local
    • staging project with organization: https://local.zooniverse.org:3000/projects/markb-panoptes/uwworgtest-chicago-wildlife
    • production test project with translated organization title: https://local.zooniverse.org:3000/projects/fr/markbouslog/digileap-testing-production?env=production&demo=true
  • fe-project-branch
    • https://fe-project-branch.preview.zooniverse.org/projects/markb-panoptes/uwworgtest-chicago-wildlife?env=staging
    • https://fe-project-branch.preview.zooniverse.org/projects/fr/markbouslog/digileap-testing-production
• What user actions should my reviewer step through to review this PR?
  • note organization link in project header and project hero section
  • in i-fancy-cats note absence of organization links
  • in production test project change language and note organization title change
• Which storybook stories should be reviewed?
  • http://localhost:9001/?path=/story/project-app-shared-project-header--organization-link
  • http://localhost:9001/?path=/story/project-app-screens-project-home-hero--with-organization
  • http://localhost:9001/?path=/story/project-app-shared-project-header-dropdown-nav--with-organization-link
• Are there plans for follow up PR’s to further fix this bug or develop this feature? no

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

New Feature

• The PR creator has listed user actions to use when testing the new feature
• Unit tests are included for the new feature
• A storybook story has been created or updated
  • Example of SlideTutorial component with docgen comments, and its story

Refactoring

• The PR creator has described the reason for refactoring
• The refactored component(s) continue to work as expected

Post-merge

• This PR adds translations keys to English dictionary(s). See guidance for pulling new keys to Lokalise here.

[coveralls]

coverage: 82.06% (+0.04%) from 82.018% when pulling eeb6b90 on app-project-fetchOrganization into e4bf598 on master.

[mcbouslog]

I might combine this PR, #4569 and PR to Add OrganizationLink to Hero into one PR.

[mcbouslog]

Open items to follow-up on:

• desktop view, show organization link in project header when on classify and about pages
• mobile view, remove organization link from project header or move organization link to project nav dropdown

cc: @seanmiller26

[eatyourgreens]

Looks good!

Pending refactor with organization store

[eatyourgreens]

I’ve already approved this once. Please do feel free to merge it with changes.

[mcbouslog]

@seanmiller26 - these changes now include an organization link throughout a project's paths (home, classify, about) and in the DropdownNav with a small screen.

When you get a chance you can check it out at:

• https://fe-project-branch.preview.zooniverse.org/projects/markb-panoptes/uwworgtest-chicago-wildlife?env=staging
• https://fe-project-branch.preview.zooniverse.org/projects/fr/markbouslog/digileap-testing-production

Let me know what you think!

[seanmiller26]

The one note I'd point out is that "From the Organization: xyz" remains untranslated in different languages.

[seanmiller26]

These changes look great!

[mcbouslog]

@eatyourgreens - there's been some substantive changes since your review, would you mind taking another look when you get a chance? No rush.