https://github.com/bonfire-networks/bonfire-app/issues/1078

lib/web/components/acls/acl_live.ex

@@ -156,6 +156,15 @@ defmodule Bonfire.UI.Boundaries.Web.AclLive do
   #   end
   # end
 
+  def handle_event("add_to_acl", %{"id" => id, "name" => name} = _attrs, socket) do
+    subject = %{
+      id: id,
+      name: name
+    }
+
+    add_to_acl(subject, socket)
+  end
+
   def handle_event("add_to_acl", %{"id" => id} = _attrs, socket) do
     add_to_acl(id, socket)
   end
@@ -337,8 +346,7 @@ defmodule Bonfire.UI.Boundaries.Web.AclLive do
     {:noreply,
      do_add_to_acl(
        %{
-         id: id,
-         name: e(assigns(socket), :suggestions, id, nil)
+         id: id
        },
        socket
      )}

lib/web/components/acls/acl_live.sface

@@ -51,20 +51,16 @@
                 class="flex items-center gap-2 w-full flex-1 flex-wrap"
                 phx-change="multi_select"
               >
-                <!-- <Bonfire.UI.Common.MultiselectLive
-                  implementation={:live_select}
-                  form_input_name={:add_circles_to_acl}
-                  preloaded_options={@my_circles}
-                  label={l("Search for circles or users to add")}
-                /> -->
                 <button
                   disabled={Enum.any?(@feed_by_subject, fn {id, _} -> id == elem(circle, 1)[:id] end)}
                   class="btn btn-outline rounded-full"
                   :for={circle <- @my_circles}
                   type="button"
+                  data-role="add-circle-to-acl"
                   phx-target={@myself}
                   phx-click="add_to_acl"
                   phx-value-id={elem(circle, 1)[:id]}
+                  phx-value-name={elem(circle, 1)[:name]}
                 >
                   {elem(circle, 1)[:name]}
                 </button>

lib/web/components/acls/new_acl_live.sface

@@ -1,67 +1,16 @@
 <div class="">
-  {!-- <div class="flex items-center space-x-2">
-    <div
-      :if={@parent_back}
-      x-on:click="show_boundary_list = true"
-      phx-click="back"
-      phx-target={@parent_back}
-      class="btn btn-sm btn-ghost btn-circle"
-    >
-      <#Icon solid="ChevronLeft" class="w-6 h-6 text-base-content/70" />
-    </div>
-    <span>{l("Back")}</span>
-  </div> --}
-
   <div x-data="{name: ''}" class="w-full mt-3">
-    {!-- <div 
-    x-data="{
-      name: '',
-      open: false,
-      close(focusAfter) {
-        if (! this.open) return
-        this.open = false
-        focusAfter && focusAfter.focus()
-      }
-    }"
-    x-on:keydown.escape.prevent.stop="close($refs.button)"
-    class="w-full form-control">
-    <label class="label">
-      <span class="font-medium label-text">{l "Choose the boundary emoji"}</span>
-      <input name="extra_info[info][icon]" value={"🔥"} type="hidden"/>
-    </label>
-    <div class="mt-1 sm:mt-0 sm:col-span-2">
-      <div class="relative flex items-center">
-        <span class="w-10 h-10 text-4xl text-gray-300">
-          {"🛡"}
-        </span>
-        <button 
-          x-on:click="open = ! open"
-          type="button" 
-          class="ml-2 normal-case btn btn-sm btn-outline">{l "Pick an emoji"}</button>
-        <div 
-          x-ref="panel"
-          x-show="open"
-          x-transition.origin.top.left
-          x-on:click.outside="close($refs.button)"
-          x-show="open" 
-          class="absolute z-40 top-12 left-3"
-          role="tooltip">
-          <div id="boundary-picker"></div>
-        </div>
-      </div>
-    </div>
-  </div> --}
-
     <div class="w-full form-control">
-      <label class="sr-only label">
-        <span class="font-medium label-text">{l("Enter a name for the boundary preset")}</span>
+      <label for="name" class="label">
+        <span class="label-text">{l("Enter a name for the boundary preset")}</span>
       </label>
       <div class="flex items-center">
         <input
           x-model="name"
+          id="name"
           name="named[name]"
           type="text"
-          placeholder={l("Type the name of the boundary preset")}
+          placeholder={l("The boundary preset...")}
           class="w-full input input-bordered"
         />
       </div>
@@ -83,13 +32,7 @@
 
     {!-- :phx-value-name="name" --}
     {!-- phx-value-no_redirect={if @setting_boundaries, do: "1"} --}
-    <button
-      x-on:click="show_boundary_list = true"
-      x-bind:disabled="name.length == 0"
-      type="submit"
-      data-role="new_acl_submit"
-      class="w-full mt-3 normal-case btn btn-primary"
-    >{l("Create")}
+    <button type="submit" data-role="new_acl_submit" class="w-full mt-3 normal-case btn btn-primary">{l("Create")}
     </button>
   </div>
 </div>

test/web/boundary_presets_test.exs

@@ -17,13 +17,26 @@ defmodule Bonfire.Boundaries.BoundaryPresetsTest do
     {:ok, conn: conn, account: account, me: me, alice: alice, bob: bob, carl: carl}
   end
 
-  test "I can create a new preset" do
+  test "I can create a new preset", %{conn: conn} do
+    conn
+    |> visit("/boundaries/acls")
+    |> click_button("[data-role=open_modal]", "New preset")
+    |> fill_in("Enter a name for the boundary preset", with: "friends")
+    |> click_button("[data-role=new_acl_submit]", "Create")
+    |> assert_has("[role=banner]", text: "friends")
   end
 
-  test "I can add a circle to a preset and specify the role" do
-  end
-
-  test "I can add a user to a preset and specify the role" do
+  test "I can add a circle to a preset and specify the role", %{conn: conn, me: me} do
+    {:ok, circle} = Bonfire.Boundaries.Circles.create(me, %{named: %{name: "bestie"}})
+
+    conn
+    |> visit("/boundaries/acls")
+    |> click_button("[data-role=open_modal]", "New preset")
+    |> fill_in("Enter a name for the boundary preset", with: "friends")
+    |> click_button("[data-role=new_acl_submit]", "Create")
+    |> assert_has("[role=banner]", text: "friends")
+    |> click_button("[data-role=add-circle-to-acl]", "bestie")
+    |> assert_has("#edit_grants", text: "bestie")
   end
 
   test "I can edit a preset I've previously created" do