Merge branch 'ar-collapsible-shortcut' into 'master'

Add a shortcut for collapsible section markdown

See merge request gitlab-org/gitlab!54938

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -63,6 +63,9 @@ export default {
         '\n',
       );
     },
+    mdCollapsibleSection() {
+      return ['<details><summary>Click to expand</summary>', `{text}`, '</details>'].join('\n');
+    },
     isMac() {
       // Accessing properties using ?. to allow tests to use
       // this component without setting up window.gl.client.
@@ -244,6 +247,13 @@ export default {
             :button-title="__('Add a task list')"
             icon="list-task"
           />
+          <toolbar-button
+            :tag="mdCollapsibleSection"
+            :prepend="true"
+            tag-select="Click to expand"
+            :button-title="__('Add a collapsible section')"
+            icon="details-block"
+          />
           <toolbar-button
             :tag="mdTable"
             :prepend="true"

app/views/shared/blob/_markdown_buttons.html.haml

@@ -19,6 +19,9 @@
   = markdown_toolbar_button({ icon: "list-bulleted", data: { "md-tag" => "- ", "md-prepend" => true }, title: _("Add a bullet list") })
   = markdown_toolbar_button({ icon: "list-numbered", data: { "md-tag" => "1. ", "md-prepend" => true }, title: _("Add a numbered list") })
   = markdown_toolbar_button({ icon: "list-task", data: { "md-tag" => "- [ ] ", "md-prepend" => true }, title: _("Add a task list") })
+  = markdown_toolbar_button({ icon: "details-block",
+                              data: { "md-tag" => "<details><summary>Click to expand</summary>\n{text}\n</details>", "md-prepend" => true, "md-select" => "Click to expand" },
+                              title: _("Add a collapsible section") })
   = markdown_toolbar_button({ icon: "table", data: { "md-tag" => "| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |", "md-prepend" => true }, title: _("Add a table") })
   - if show_fullscreen_button
     %button.toolbar-btn.toolbar-fullscreen-btn.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, "aria-label": "Go full screen", title: _("Go full screen"), data: { container: "body" } }

changelogs/unreleased/ar-collapsible-shortcut.yml

+---
+title: Add collapsible section shortcut to markdown controls
+merge_request: 54938
+author:
+type: added

doc/user/markdown.md

@@ -1092,7 +1092,7 @@ Markdown is fine in GitLab.
   </dd>
 </dl>
 
-#### Details and summary
+#### Collapsible section
 
 To see the second Markdown example rendered in HTML,
 [view it in GitLab](https://gitlab.com/gitlab-org/gitlab/blob/master/doc/user/markdown.md#details-and-summary).

locale/gitlab.pot

@@ -1895,6 +1895,9 @@ msgstr ""
 msgid "Add a bullet list"
 msgstr ""
 
+msgid "Add a collapsible section"
+msgstr ""
+
 msgid "Add a comment to this line"
 msgstr ""
 

spec/frontend/vue_shared/components/markdown/header_spec.js

@@ -48,6 +48,7 @@ describe('Markdown field header component', () => {
         'Add a bullet list',
         'Add a numbered list',
         'Add a task list',
+        'Add a collapsible section',
         'Add a table',
         'Go full screen',
       ];
@@ -133,6 +134,14 @@ describe('Markdown field header component', () => {
     );
   });
 
+  it('renders collapsible section template', () => {
+    const detailsBlockButton = findToolbarButtonByProp('icon', 'details-block');
+
+    expect(detailsBlockButton.props('tag')).toEqual(
+      '<details><summary>Click to expand</summary>\n{text}\n</details>',
+    );
+  });
+
   it('does not render suggestion button if `canSuggest` is set to false', () => {
     createWrapper({
       canSuggest: false,