Feature: add campaign details page header with tabs, save buttons, and form with sample input

[glaubersilva]

Resolves GIVE-1218

Description

This PR implements the campaign details page with the following items:

• Breadcrumbs
• Title
• Update/Publish campaign buttons
• Tabs (easily extensible) that can be accessed through links and also keep the history of the "back" and "forward" buttons from the browser - without using any external library for that.
• Form using react-hook-form to keep the context through the different tabs

This will require a subsequent PR for design review, but the main functionality is already in place. The idea here is to move forward with the project and not block the rest of the team that is depending on this screen to keep going on their tasks.

Affects

The campaign details page.

Visuals

https://www.loom.com/share/f690359235444dc38bad921c4616e2b8?sid=c2137137-c1e0-41e6-9b06-37056dc87eba

Testing Instructions

1. Create a new campaign;
2. Go to the settings tab and change the title, save as a draft;
3. Publish the campaign with the new name.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[JasonTheAdams]

Great progress, @glaubersilva!

@alaca @kjohnson @jonwaldstein This is a good example of why I think it would be a good idea to set up the Data API as soon as possible. All of the state described here would work well within the store. It also wouldn't have the same rendering issues as the Context API.

As a note, we'd also be able to use the Redux dev tools to start to do things like watch, edit, and rewrite state changes for debugging.

[kjohnson]

On a related note, we should discuss a strategy for handling how Admin Notices appear within our admin pages.

Probably a larger discussion, but noting it here.

[glaubersilva]

@kjohnson Thanks for the suggestions. I already implemented them. Let me know if there is something else.

About the admin notices, those are displayed after the <div className={cx('wp-header-end', 'hidden')} /> element, and in that case, I choose put it after the tabs navigation because it has the same color as the header

I think it would be a bit weird to display the notices before the tabs because the tabs and the header seem to be one single thing, different from the event details page where the tabs navigation and the head have different colors - check the attached screenshots for reference.

Event Details Page - Notices before the tabs navegation:

Campaign Details Page - Notices before the tabs navegation:

Campaign Details Page - Notices after the tabs navegation: