Enable Tailwind/StringInterpolation cop rule

Generate TODOs and put this cop rule in grace period to ensure master
stability.

.rubocop.yml

@@ -1235,3 +1235,10 @@ Gitlab/NoFindInWorkers:
   Include:
     - app/workers/**/*
     - ee/app/workers/**/*
+
+Tailwind/StringInterpolation:
+  Enabled: true
+  Include:
+  - '{,ee/,jh/}app/helpers/**/*.rb'
+  - '{,ee/,jh/}app/components/**/*.{haml,rb}'
+  - '{,ee/,jh/}app/views/**/*.haml'

app/components/pajamas/alert_component.rb

@@ -29,7 +29,7 @@ def initialize(
     end
 
     def base_class
-      classes = ["gl-alert-#{@variant}"]
+      classes = ["gl-alert-#{@variant}"] # rubocop:disable Tailwind/StringInterpolation -- Not a CSS utility class
       classes.push('gl-alert-not-dismissible') unless @dismissible
       classes.push('gl-alert-no-icon') unless @show_icon
       classes.push('gl-alert-has-title') if @title
@@ -48,7 +48,7 @@ def icon
     end
 
     def icon_classes
-      "gl-alert-icon#{' gl-alert-icon-no-title' if @title.nil?}"
+      "gl-alert-icon#{' gl-alert-icon-no-title' if @title.nil?}" # rubocop:disable Tailwind/StringInterpolation -- Not a CSS utility class
     end
 
     def dismissible_button_options

app/components/pajamas/avatar_component.rb

@@ -27,7 +27,7 @@ def initialize(item, alt: nil, class: "", size: 64, avatar_options: {})
     private
 
     def avatar_classes
-      classes = ["gl-avatar", "gl-avatar-s#{@size}", @class]
+      classes = ["gl-avatar", "gl-avatar-s#{@size}", @class] # rubocop:disable Tailwind/StringInterpolation -- Not a CSS utility class
       if @item.is_a?(User) || @item.is_a?(AvatarEmail)
         classes.push("gl-avatar-circle")
       else
@@ -36,7 +36,7 @@ def avatar_classes
 
       unless src
         classes.push("gl-avatar-identicon")
-        classes.push("gl-avatar-identicon-bg#{((@item.id || 0) % 7) + 1}")
+        classes.push("gl-avatar-identicon-bg#{((@item.id || 0) % 7) + 1}") # rubocop:disable Tailwind/StringInterpolation -- Not a CSS utility class
       end
 
       classes.join(' ')

app/components/pajamas/spinner_component.rb

@@ -20,7 +20,9 @@ def initialize(color: :dark, inline: false, label: _("Loading"), size: :sm, **ht
     private
 
     def spinner_class
+      # rubocop:disable Tailwind/StringInterpolation -- Not a CSS utility class
       ["gl-spinner", "gl-spinner-#{@size}", "gl-spinner-#{@color} !gl-align-text-bottom"]
+      # rubocop:enable Tailwind/StringInterpolation
     end
 
     def html_options

app/helpers/application_helper.rb

@@ -414,7 +414,7 @@ def read_only_message
   end
 
   def client_class_list
-    "gl-browser-#{browser_id} gl-platform-#{platform_id}"
+    "gl-browser-#{browser_id} gl-platform-#{platform_id}" # rubocop:disable Tailwind/StringInterpolation -- Not a CSS utility class
   end
 
   def client_js_flags

app/helpers/icons_helper.rb

@@ -84,7 +84,7 @@ def gl_loading_icon(inline: false, color: 'dark', size: 'sm', css_class: nil, da
   end
 
   def external_snippet_icon(name)
-    content_tag(:span, "", class: "gl-snippet-icon gl-snippet-icon-#{name}")
+    content_tag(:span, "", class: "gl-snippet-icon gl-snippet-icon-#{name}") # rubocop:disable Tailwind/StringInterpolation -- Not a CSS utility class
   end
 
   def audit_icon(name, css_class: nil)