Add service desk project key validation error message

Show error message for invalid service desk project
keys.

Changelog: other

app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue

 <script>
-import { GlAlert } from '@gitlab/ui';
+import { GlAlert, GlSafeHtmlDirective } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { __, sprintf } from '~/locale';
 import ServiceDeskSetting from './service_desk_setting.vue';
@@ -9,6 +9,9 @@ export default {
     GlAlert,
     ServiceDeskSetting,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   inject: {
     initialIsEnabled: {
       default: false,
@@ -121,7 +124,7 @@ export default {
 <template>
   <div>
     <gl-alert v-if="isAlertShowing" class="mb-3" :variant="alertVariant" @dismiss="onDismiss">
-      {{ alertMessage }}
+      <span v-safe-html="alertMessage"></span>
     </gl-alert>
     <service-desk-setting
       :is-enabled="isEnabled"

app/models/service_desk_setting.rb

@@ -8,7 +8,10 @@ class ServiceDeskSetting < ApplicationRecord
   validate :valid_issue_template
   validate :valid_project_key
   validates :outgoing_name, length: { maximum: 255 }, allow_blank: true
-  validates :project_key, length: { maximum: 255 }, allow_blank: true, format: { with: /\A[a-z0-9_]+\z/ }
+  validates :project_key,
+            length: { maximum: 255 },
+            allow_blank: true,
+            format: { with: /\A[a-z0-9_]+\z/, message: -> (setting, data) { _("can contain only lowercase letters, digits, and '_'.") } }
 
   scope :with_project_key, ->(key) { where(project_key: key) }
 

locale/gitlab.pot

@@ -37892,6 +37892,9 @@ msgstr ""
 msgid "can contain only letters of the Base64 alphabet (RFC4648) with the addition of '@', ':' and '.'"
 msgstr ""
 
+msgid "can contain only lowercase letters, digits, and '_'."
+msgstr ""
+
 msgid "can only be changed by a group admin."
 msgstr ""
 

spec/models/service_desk_setting_spec.rb

@@ -10,7 +10,7 @@ RSpec.describe ServiceDeskSetting do
     it { is_expected.to validate_length_of(:outgoing_name).is_at_most(255) }
     it { is_expected.to validate_length_of(:project_key).is_at_most(255) }
     it { is_expected.to allow_value('abc123_').for(:project_key) }
-    it { is_expected.not_to allow_value('abc 12').for(:project_key) }
+    it { is_expected.not_to allow_value('abc 12').for(:project_key).with_message("can contain only lowercase letters, digits, and '_'.") }
     it { is_expected.not_to allow_value('Big val').for(:project_key) }
 
     describe '.valid_issue_template' do