Revise UI text for Kroki settings

Revise UI text and fix split sentences

Changelog: other

app/models/application_setting.rb

@@ -30,7 +30,7 @@ class ApplicationSetting < ApplicationRecord
   def self.kroki_formats_attributes
     {
       blockdiag: {
-        label: 'BlockDiag (includes BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag and RackDiag)'
+        label: 'BlockDiag (includes BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, and RackDiag)'
       },
       bpmn: {
         label: 'BPMN'

app/views/admin/application_settings/_kroki.html.haml

@@ -6,7 +6,8 @@
     %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
-      = _('Allow rendering of diagrams in AsciiDoc and Markdown documents using %{link}.').html_safe % { link: link_to('Kroki', 'https://kroki.io', target: '_blank') }
+      = _('Users can render diagrams in AsciiDoc, Markdown, reStructuredText, and Textile documents using Kroki.')
+      = link_to _('Learn more.'), help_page_path('administration/integration/kroki.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-kroki-settings'), html: { class: 'fieldset-form', id: 'kroki-settings' } do |f|
       = form_errors(@application_setting) if expanded
@@ -20,11 +21,15 @@
           = f.label :kroki_url, 'Kroki URL', class: 'label-bold'
           = f.text_field :kroki_url, class: 'form-control gl-form-input', placeholder: 'http://your-kroki-instance:8000'
           .form-text.text-muted
-            = (_('When Kroki is enabled, GitLab sends diagrams to an instance of Kroki to display them as images. You can use the free public cloud instance %{kroki_public_url} or you can %{install_link} on your own infrastructure. Once you\'ve installed Kroki, make sure to update the server URL to point to your instance.') % { kroki_public_url: '<code>https://kroki.io</code>', install_link: link_to('install Kroki', 'https://docs.kroki.io/kroki/setup/install/', target: '_blank') }).html_safe
+            - install_link_url = 'https://docs.kroki.io/kroki/setup/install/'
+            - install_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: install_link_url }
+            = html_escape(_('Use the public cloud instance URL (%{kroki_public_url}) or %{install_link_start}install Kroki%{install_link_end} on your own infrastructure and use your own instance URL.')) % { kroki_public_url: '<code>https://kroki.io</code>'.html_safe, install_link_start: install_link_start, install_link_end: '</a>'.html_safe }
         .form-group
           = f.label :kroki_formats, 'Additional diagram formats', class: 'label-bold'
           .form-text.text-muted
-            = (_('Using additional formats requires starting the companion containers. Make sure that all %{kroki_images} are running.') % { kroki_images: link_to('required containers', 'https://docs.kroki.io/kroki/setup/install/#_images', target: '_blank') }).html_safe
+            - container_link_url = 'https://docs.kroki.io/kroki/setup/install/#images'
+            - container_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: container_link_url }
+            = html_escape(_('To use the additional formats, you must start the required %{container_link_start}companion containers%{container_link_end}.')) % { container_link_start: container_link_start, container_link_end: '</a>'.html_safe }
           - kroki_available_formats.each do |format|
             .form-check
               = f.check_box format[:name], class: 'form-check-input'

locale/gitlab.pot

@@ -3342,9 +3342,6 @@ msgstr ""
 msgid "Allow rendering of PlantUML diagrams in Asciidoc documents."
 msgstr ""
 
-msgid "Allow rendering of diagrams in AsciiDoc and Markdown documents using %{link}."
-msgstr ""
-
 msgid "Allow requests to the local network from hooks and services."
 msgstr ""
 
@@ -34324,6 +34321,9 @@ msgstr ""
 msgid "To use Gitpod you must first enable the feature in the integrations section of your %{user_prefs}."
 msgstr ""
 
+msgid "To use the additional formats, you must start the required %{container_link_start}companion containers%{container_link_end}."
+msgstr ""
+
 msgid "To view all %{scannedResourcesCount} scanned URLs, %{linkStart}please download the CSV file%{linkEnd}"
 msgstr ""
 
@@ -35559,6 +35559,9 @@ msgstr ""
 msgid "Use the link below to confirm your email address."
 msgstr ""
 
+msgid "Use the public cloud instance URL (%{kroki_public_url}) or %{install_link_start}install Kroki%{install_link_end} on your own infrastructure and use your own instance URL."
+msgstr ""
+
 msgid "Use the search bar on the top of this page"
 msgstr ""
 
@@ -35898,6 +35901,9 @@ msgstr ""
 msgid "Users can launch a development environment from a GitLab browser tab when the %{linkStart}Gitpod%{linkEnd} integration is enabled."
 msgstr ""
 
+msgid "Users can render diagrams in AsciiDoc, Markdown, reStructuredText, and Textile documents using Kroki."
+msgstr ""
+
 msgid "Users in License"
 msgstr ""
 
@@ -35934,9 +35940,6 @@ msgstr ""
 msgid "Using %{code_start}::%{code_end} denotes a %{link_start}scoped label set%{link_end}"
 msgstr ""
 
-msgid "Using additional formats requires starting the companion containers. Make sure that all %{kroki_images} are running."
-msgstr ""
-
 msgid "Using required encryption strategy when encrypted field is missing!"
 msgstr ""
 
@@ -36880,9 +36883,6 @@ msgstr ""
 msgid "What’s your experience level?"
 msgstr ""
 
-msgid "When Kroki is enabled, GitLab sends diagrams to an instance of Kroki to display them as images. You can use the free public cloud instance %{kroki_public_url} or you can %{install_link} on your own infrastructure. Once you've installed Kroki, make sure to update the server URL to point to your instance."
-msgstr ""
-
 msgid "When a deployment job is successful, skip older deployment jobs that are still pending."
 msgstr ""
 

spec/helpers/application_settings_helper_spec.rb

@@ -238,7 +238,7 @@ RSpec.describe ApplicationSettingsHelper do
       expect(helper.kroki_available_formats).to eq([
                                              {
                                                name: 'kroki_formats_blockdiag',
-                                               label: 'BlockDiag (includes BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag and RackDiag)',
+                                               label: 'BlockDiag (includes BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, and RackDiag)',
                                                value: true
                                              },
                                              {