add a test case and some small tweaks

apps/dashboard/app/javascript/packs/icon_picker.js

@@ -10,23 +10,24 @@ const ICON_SELECT_ID = "product_icon_select"
 function listItem(name) {
   return `<li 
               id="${iconId(name)}" 
-              class="btn btn-outline-dark">
-            <i class="fas fa-${name}"></i>
+              class="btn btn-outline-dark"
+              role='button'>
+            <i class="fas fa-${name} fa-fw"></i>
           </li>`;
 }
 
 function iconId(name) {
-  return `icon_${name.replace('-', '_')}`;
+  return `icon_${name.replaceAll('-', '_')}`;
 }
 
 function iconFromId(id) {
   const m = id.match(/^icon_([\w+_]+)/);
-  if(m && m[1]) { return m[1].replace('_','-') };
+  if(m && m[1]) { return m[1].replaceAll('_','-') };
 }
 
 function picked(event) {
   const icon = iconFromId(event.currentTarget.id);
-  $(`#${ICON_SHOW_ID}`).attr("class", `fas fa-${icon} app-icon`);
+  $(`#${ICON_SHOW_ID}`).attr("class", `fas fa-${icon} fa-fw app-icon`);
   $(`#${ICON_SELECT_ID}`).val(`fas://${icon}`)
 }
 

apps/dashboard/app/javascript/stylesheets/application.scss

@@ -149,4 +149,5 @@ small.form-text {
 @import "buttons";
 @import "files";
 @import "editor";
+@import "icon_picker";
 @import "uppy/dist/uppy.min";

apps/dashboard/app/javascript/stylesheets/icon_picker.scss

@@ -0,0 +1,31 @@
+// styles for the icon picker used in product edit pages
+
+#icon_search {
+  max-width: 98%;
+}
+
+// this is a ul element
+#icon_picker_list {
+  list-style-type: none;
+  padding: 0;
+  max-height: 18em;
+  overflow: scroll;
+
+  // this is the main styling
+  li {
+    display: inline-flex;
+
+    width: 3em;
+    height: 3em;
+    padding: .5em;
+    border-radius: 3px;
+    margin: .3em;
+    justify-content: center;
+    align-items: center;
+
+    i {
+      box-sizing: inheret;
+      font-size: 2em;
+    }
+  }
+}

apps/dashboard/app/javascript/stylesheets/products.scss

@@ -45,34 +45,3 @@
   max-width: 100%;
 }
 
-#icon_search {
-  max-width: 98%;
-}
-
-// this is a ul element
-#icon_picker_list {
-  list-style-type: none;
-  padding: 0;
-  max-height: 18em;
-  overflow: scroll;
-
-  // this is the main styling
-  li {
-    display: inline-flex;
-
-    width: 3em;
-    height: 3em;
-    padding: .5em;
-    border-radius: 3px;
-    margin: .3em;
-    justify-content: center;
-    align-items: center;
-
-    i {
-      box-sizing: inheret;
-      font-size: 2em;
-    }
-
-
-  }
-}

apps/dashboard/app/views/products/_form_icon.html.erb

@@ -22,13 +22,11 @@
     </div>
   <% end %>
   <div class="field" id="icon_select_list">
-    <%= f.text_field :icon, placeholder: "fas://cog", id: "product_icon_select" %>
+    <%= f.text_field :icon, placeholder: "fas://cog", id: "product_icon_select",
+        help: 'Use the list of icons below to choose from' %>
 
 
     <div class="card">
-      <div class="card-header lead">
-        <input type="text" id="icon_search" name="icon_search" placeholder="search">
-      </div>
       <div class="card-body">
         <ul id="icon_picker_list">
         </ul>

apps/dashboard/test/application_system_test_case.rb

@@ -26,4 +26,8 @@ def find_min(ele)
   def find_value(ele, visible: false)
     find("##{bc_ele_id(ele)}", visible: visible).value
   end
+
+  def find_css_class(id)
+    find("##{id}")['class'].to_s
+  end
 end

apps/dashboard/test/system/products_dev_test.rb

@@ -63,4 +63,29 @@ def setup
     find(id: 'productTable')
     assert_selector 'tr', count: 12
   end
+
+  test 'picking a new icon' do
+    Dir.mktmpdir do |dir|
+      FileUtils.cp_r("test/fixtures/sys_with_gateway_apps/dashboard", dir)
+      DevRouter.stubs(:base_path).returns(Pathname.new(dir))
+
+      visit edit_product_path('dev', 'dashboard')
+      assert_equal 'fas fa-cog fa-fw app-icon', find_css_class('product_icon')
+
+      find('#icon_dumpster_fire').click
+
+      assert_equal 'fas fa-dumpster-fire fa-fw app-icon', find_css_class('product_icon')
+      click_on 'Save'
+      actual_manifest = File.read("#{dir}/dashboard/manifest.yml")
+      expected_manifest = <<~HEREDOC
+        ---
+        name: Ood Dashboard
+        description: stuff
+        icon: fas://dumpster-fire
+      HEREDOC
+
+      assert_equal current_path, product_path('dev', 'dashboard')
+      assert_equal expected_manifest, actual_manifest
+    end
+  end
 end