Merge branch 'leipert-proper-icon-validator' into 'master'

Proper icon validator

Closes #49236

See merge request gitlab-org/gitlab-ce!20620

2 files changed, 43 insertions, 12 deletions

diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index c42c4a1fbe7..e7ff76c8218 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -1,24 +1,40 @@
 <script>
-/* This is a re-usable vue component for rendering a svg sprite
-  icon
 
-  Sample configuration:
-
-  <icon
-    name="retry"
-    :size="32"
-    css-classes="top"
-  />
-
-*/
 // only allow classes in images.scss e.g. s12
 const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
+let iconValidator = () => true;
+
+/*
+ During development/tests we want to validate that we are just using icons that are actually defined
+*/
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line global-require
+  const data = require('@gitlab-org/gitlab-svgs/dist/icons.json');
+  const { icons } = data;
+  iconValidator = value => {
+    if (icons.includes(value)) {
+      return true;
+    }
+    // eslint-disable-next-line no-console
+    console.warn(`Icon '${value}' is not a known icon of @gitlab/gitlab-svg`);
+    return false;
+  };
+}
 
+/** This is a re-usable vue component for rendering a svg sprite icon
+ *  @example
+ *  <icon
+ *    name="retry"
+ *    :size="32"
+ *    css-classes="top"
+ *  />
+ */
 export default {
   props: {
     name: {
       type: String,
       required: true,
+      validator: iconValidator,
     },
 
     size: {
@@ -83,6 +99,6 @@ export default {
     :x="x"
     :y="y"
   >
-    <use v-bind="{ 'xlink:href':spriteHref }" />
+    <use v-bind="{ 'xlink:href':spriteHref }"/>
   </svg>
 </template>
diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb
index 2f304b040c7..41084ec686f 100644
--- a/app/helpers/icons_helper.rb
+++ b/app/helpers/icons_helper.rb
@@ -1,3 +1,5 @@
+require 'json'
+
 module IconsHelper
   extend self
   include FontAwesome::Rails::IconHelper
@@ -38,6 +40,13 @@ module IconsHelper
   end
 
   def sprite_icon(icon_name, size: nil, css_class: nil)
+    if Gitlab::Sentry.should_raise?
+      unless known_sprites.include?(icon_name)
+        exception = ArgumentError.new("#{icon_name} is not a known icon in @gitlab-org/gitlab-svg")
+        raise exception
+      end
+    end
+
     css_classes = size ? "s#{size}" : ""
     css_classes << " #{css_class}" unless css_class.blank?
     content_tag(:svg, content_tag(:use, "", { "xlink:href" => "#{sprite_icon_path}##{icon_name}" } ), class: css_classes.empty? ? nil : css_classes)
@@ -134,4 +143,10 @@ module IconsHelper
 
     icon_class
   end
+
+  private
+
+  def known_sprites
+    @known_sprites ||= JSON.parse(File.read(Rails.root.join('node_modules/@gitlab-org/gitlab-svgs/dist/icons.json')))['icons']
+  end
 end