[Debug mode] View diff between input/output headers & context attributes

[mouligno]

:rainbow: Feature

As an API Publisher

I want to view the diff between input/output headers & context attributes

So that I can understand what's happened

:sunrise_over_mountains: Additional information

• Can be applicable at global/flow/policy level
• Color code to view diff : addition / edition / deletion
• respect the input/output line display to visually view the changes
• list special hedge cases if you found some

:link: Dependencies

Link a story or other related things...

:camera: Mockups

https://www.figma.com/file/MxLXjCNRnhyMnpapRDgKOT/Try_iT_V4?node-id=291%3A461

:books: Documentation required

https://github.com/gravitee-io/gravitee-docs/issues/630

:superhero: Acceptance criteria

• [x] Given an input and output (policy/flow/global) then I can view there are some added headers on top of response info
• [x] Given an input and output (policy/flow/global) then I can view there are some removed headers in line with input header position
• [x] Given an input and output (policy/flow/global) then I can view there some updated headers in line with input header

:warning: Potential impacts

Which other features may be impacted by this fix. This could be populated after fix

What are the impacted versions?

:heavy_check_mark: Definition of Done

For each User Story everything on the list must be considered, select only what was required

• [ ] Acceptance criteria met and tested
• [ ] Sonar Cloud quality gate passes
• [ ] CircleCi checks pass
• [ ] Cypress or Postman API check passes
• [ ] Test containers passed if modifications on the repository modules
• [ ] Translation for portal UI checked
• [ ] Developer created draft documentation PR
• [ ] New migration scripts checked Can be run multiple times but only makes changes the first time Display to user what script has done
• [ ] Validated on appropriate environment
• [ ] Existing test cases refactored

:rocket:

[LiliaEn]

7126

[LiliaEn]

Tested on the default env v3.16.0 Browser: Chrome Version 97.0.4692.99 , macOS Big Sur v11.6

• Checked that added headers and attributes are displayed correctly and are marked with green colour
• Checked that removed headers and attributes are displayed correctly and are marked with red colour
• Checked that updated headers and attributes are displayed correctly and are marked with orange colour