1 files changed, 7 insertions, 5 deletions
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index f68666f8a0c..c95c90d5daf 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -1,10 +1,12 @@
 <script>
-import { GlLoadingIcon, GlFormInput, GlFormGroup, GlButton, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlLoadingIcon, GlFormInput, GlFormGroup, GlButton } from '@gitlab/ui';
 import { escape, debounce } from 'lodash';
 import { mapActions, mapState } from 'vuex';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import { createAlert, VARIANT_INFO } from '~/flash';
 import { s__, sprintf } from '~/locale';
 import createEmptyBadge from '../empty_badge';
+import { PLACEHOLDERS } from '../constants';
 import Badge from './badge.vue';
 
 const badgePreviewDelayInMilliseconds = 1500;
@@ -19,7 +21,7 @@ export default {
     GlFormGroup,
   },
   directives: {
-    SafeHtml: GlSafeHtmlDirective,
+    SafeHtml,
   },
   props: {
     isEditing: {
@@ -49,9 +51,9 @@ export default {
       return this.badgeInAddForm;
     },
     helpText() {
-      const placeholders = ['project_path', 'project_id', 'default_branch', 'commit_sha']
-        .map((placeholder) => `<code>%{${placeholder}}</code>`)
-        .join(', ');
+      const placeholders = PLACEHOLDERS.map((placeholder) => `<code>%{${placeholder}}</code>`).join(
+        ', ',
+      );
       return sprintf(
         s__('Badges|Supported %{docsLinkStart}variables%{docsLinkEnd}: %{placeholders}'),
         {