Feature branch/tet 613 refactor investment project

[Richard-Pentecost]

Description of change

Refactor project investment pages so that the layout is rendered before the resource is loaded. Create new layouts for the investment pages to use so that inline resources can be rendered for better user experience if there are errors.

Test instructions

These steps use 'Super Awesome Project' as an example investment project but you can use any investment project to test the changes.

To carry out these steps, run the dev environment locally.

1. From the Data Hub homepage, navigate to the Investments page

2. Select an Investment Project to load the Project details page e.g. Super Awesome Project

3. You should see the page layout load before the page resources i.e. you should be able to see the page header and left hand navigation whilst the Investment information is loaded (see screen shots below for an example). Loading wheels should appear inline.

4. To test that the page displays error messages inline when an investment cannot be loaded, update the ProjectId to an unrecognisable string
   e.g.

const ProjectTeam = () => {
// const { projectId } = useParams()
const projectId = 'asdf'

5. Repeat the previous steps for the following pages within the investment project:

• Project team
• Edit client relationship management
• Edit team members
• Tasks
• Interactions
• Propositions
• Evaluations
• Edit history
• Evidence

Screenshots

Before

Appearance of Project Team page with no errors:

After

Appearance of Project Team page with no errors:

Before

Appearance of Project Team page with errors:

After

Appearance of Project Team page with errors:

Checklist

• Has the branch been rebased to main?
• Automated tests (Any of the following when applicable: Unit, Functional or End-to-End)
• Manual compatibility testing (Browsers: Chrome, Firefox, Edge, Safari)

[cypress]

Passing run #50926 ↗︎

0

24

0

0

0

Details:

refactor InvestmentProjectAdmin component to use common InvestmentName component
Project: data-hub-frontend	Commit: fee5e75413
Status: Passed	Duration: 02:01 💡
Started: Feb 8, 2024 10:58 AM	Ended: Feb 8, 2024 11:00 AM

Review all test suite changes for PR #6465 ↗︎

[oliverjwroberts]

The changes you have made all look good to me and are working as expected on my end. In fact, I really like how the pages now load.

However, I did note that when testing if the error messages load with an unknown project ID, clicking on the Admin tab caused an error and the app to crash.

After clicking on the Evidence tab, the error messages appear as expected:

After clicking on the Admin tab, the app crashed:

Console output:

error: uncaughtException: Cannot destructure property 'id' of 'res.locals.investment' as it is undefined.
TypeError: Cannot destructure property 'id' of 'res.locals.investment' as it is undefined.
[nodemon] app crashed - waiting for file changes before starting...

This can also be replicated on the staging environment with a 504 error, so most likely a pre-existing issue.

I'd be happy to discuss further, but thought we might want to investigate some more before publishing this change as it could potentially increase the chance of users accidentally experiencing the issue.