Render "Integration Help" HTML in HAML, but reposition it in Vue
What does this MR do?
This MR is an MVC towards #273269 (closed). It gives us the ability to reposition _help.html.haml partials in Vue. Please, read on!
What is happening here?
We define an element in HAML (.js-integration-help-html). We then place all help-related content under this node.
Then, in Vue, we define a prop helpHtml, which accepts the innerHTML of the .js-integration-help element.
In our Vue template, we render this content with a v-safe-html directive. Additional config for the directive is required for SVG icons.
Why?
- we need control over where this content is placed in our layout (to achieve #273269 (closed))
- It's not worth moving all of it to Vue templates - it is static content
Screenshots (strongly suggested)
The below screenshot shows what element is being repositioned (the source code for this particular case is here: app/views/projects/services/slack/_help.haml:
Examples below demonstrate no user facing changes.
Example of Jira integration form:
| Before | After |
|---|---|
 |
 |
An example of SVG icons rendering correctly (this is for the "Slack slash command" integration):
| Before | After |
|---|---|
 |
 |
Does this MR meet the acceptance criteria?
Conformity
- [-] Changelog entry
-
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Related to #273269 (closed)