Move tag list input to a component

app/components/tag_list_input_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class TagListInputComponent < ViewComponent::Base
+  # method in a "hidden_field" form helper and is the method used to get a list of tag on the model
+  def initialize(form:, method:, tags:, placeholder: "Add a tag")
+    @f = form
+    @method = method
+    @tags = tags
+    @placeholder = placeholder
+  end
+
+  attr_reader :f, :method, :tags, :placeholder
+end

app/components/tag_list_input_component/tag_list_input_component.html.haml

@@ -0,0 +1,11 @@
+= f.hidden_field method.to_sym, value: tags.join(",")
+.tags-input
+  .tags
+    %ul.tag-list
+      - tags.each do |tag|
+        %li.tag-item
+          .tag-template
+            %span=tag
+            %a.remove-button
+              ✖
+    = text_field_tag :variant_add_tag, nil, class: "input", placeholder: placeholder

app/components/tag_list_input_component/tag_list_input_component.scss

@@ -0,0 +1,73 @@
+// Tags input
+.tags-input {
+  display: block;
+
+  .tags {
+    -moz-appearance: textfield;
+    -webkit-appearance: textfield;
+    overflow: hidden;
+    word-wrap: break-word;
+    cursor: text;
+    background-color: #fff;
+    height: 100%;
+    box-shadow: none;
+
+    .tag-list {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+    }
+
+    li.tag-item {
+      -webkit-border-radius: 3px;
+      -moz-border-radius: 3px;
+      -ms-border-radius: 3px;
+      -o-border-radius: 3px;
+      border-radius: 3px;
+      margin: 2px 0 2px 3px;
+      padding: 0 5px;
+      display: inline-block;
+      float: left;
+      font:
+        14px "Helvetica Neue",
+        Helvetica,
+        Arial,
+        sans-serif;
+      font-size: 85%;
+      height: 25px;
+      line-height: 25px;
+      border: none;
+      box-shadow: none;
+      color: white !important;
+      background-image: none;
+      background-color: $teal;
+
+      .remove-button {
+        margin: 0 0 0 5px;
+        padding: 0;
+        border: none;
+        background: 0 0;
+        cursor: pointer;
+        vertical-align: middle;
+        font:
+          700 16px Arial,
+          sans-serif;
+        color: white;
+      }
+    }
+
+    .input {
+      border: 0;
+      outline: 0;
+      margin: 2px;
+      padding: 0 0 0 5px;
+      float: left;
+      height: 26px;
+      font:
+        14px "Helvetica Neue",
+        Helvetica,
+        Arial,
+        sans-serif;
+    }
+  }
+}

app/views/admin/products_v3/_variant_row.html.haml

@@ -76,17 +76,7 @@
   = error_message_on variant, :tax_category
 - if feature?(:variant_tag, spree_current_user)
   %td.col-tags.field.naked_inputs
-    = f.hidden_field :variant_tag_list, value: variant.variant_tag_list.join(",")
-    .tags-input
-      .tags
-        %ul.tag-list
-          - variant.variant_tag_list.each do |tag|
-            %li.tag-item
-              .tag-template
-                %span=tag
-                %a.remove-button
-                  ✖
-        = text_field_tag :variant_add_tag, nil, class: "input", placeholder: t('.add_a_tag')
+    = render TagListInputComponent.new(form: f, method: "variant_tag_list", tags: variant.variant_tag_list, placeholder: t('.add_a_tag'))
 %td.col-inherits_properties.align-left
   -# empty
 %td.align-right

app/webpacker/css/admin/products_v3.scss

@@ -368,78 +368,4 @@
     transform-origin: top;
     animation: slideInTop 0.5s forwards;
   }
-
-  // Tags input
-  .tags-input {
-    display: block;
-
-    .tags {
-      -moz-appearance: textfield;
-      -webkit-appearance: textfield;
-      overflow: hidden;
-      word-wrap: break-word;
-      cursor: text;
-      background-color: #fff;
-      height: 100%;
-      box-shadow: none;
-
-      .tag-list {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-      }
-
-      li.tag-item {
-        -webkit-border-radius: 3px;
-        -moz-border-radius: 3px;
-        -ms-border-radius: 3px;
-        -o-border-radius: 3px;
-        border-radius: 3px;
-        margin: 2px 0 2px 3px;
-        padding: 0 5px;
-        display: inline-block;
-        float: left;
-        font:
-          14px "Helvetica Neue",
-          Helvetica,
-          Arial,
-          sans-serif;
-        font-size: 85%;
-        height: 25px;
-        line-height: 25px;
-        border: none;
-        box-shadow: none;
-        color: white !important;
-        background-image: none;
-        background-color: $teal;
-
-        .remove-button {
-          margin: 0 0 0 5px;
-          padding: 0;
-          border: none;
-          background: 0 0;
-          cursor: pointer;
-          vertical-align: middle;
-          font:
-            700 16px Arial,
-            sans-serif;
-          color: white;
-        }
-      }
-
-      .input {
-        border: 0;
-        outline: 0;
-        margin: 2px;
-        padding: 0 0 0 5px;
-        float: left;
-        height: 26px;
-        font:
-          14px "Helvetica Neue",
-          Helvetica,
-          Arial,
-          sans-serif;
-      }
-    }
-  }
 }

app/webpacker/css/admin_v3/all.scss

@@ -128,6 +128,7 @@
 
 @import "app/components/modal_component/modal_component";
 @import "app/components/vertical_ellipsis_menu/component"; // admin_v3 and only V3
+@import "app/components/tag_list_input_component/tag_list_input_component";
 @import "app/webpacker/css/admin/trix.scss";
 
 @import "terms_of_service_banner"; // admin_v3