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

bonfire-networks · Nov 20, 2024 · a7f9ad4 · a7f9ad4
1 parent 36ca9b8
commit a7f9ad4
Show file tree

Hide file tree

Showing 12 changed files with 315 additions and 67 deletions.
diff --git a/lib/web/components/circles/add_to_circle/add_to_circle_live.sface b/lib/web/components/circles/add_to_circle/add_to_circle_live.sface
@@ -18,12 +18,12 @@
       {#if !@as_icon}
         <div class="flex items-center w-full gap-2 text-sm text-base-content">
           <#Icon iconify="pajamas:group" class="w-4 h-4 shrink-0" />
-          <span>{l("Add %{name} to a circle", name: @name)}</span>
+          <span>{l("Add to circles")}</span>
         </div>
       {#else}
         <div class="btn btn-sm w-full flex-1 btn-outline">
           <#Icon iconify="pajamas:group" class="w-4 h-4 shrink-0" />
-          <span class="font-semibold">{l("Add %{name} to a circle", name: @name)}</span>
+          <span class="font-semibold">{l("Add to circles")}</span>
         </div>
       {/if}
     </:open_btn>

diff --git a/lib/web/components/circles/add_to_circle/add_to_circle_widget_live.sface b/lib/web/components/circles/add_to_circle/add_to_circle_widget_live.sface
@@ -16,14 +16,15 @@
       {#else}
         {#for circle <- e(@circles, [])}
           {#if Enum.any?(e(circle, :encircles, []), fn c -> Map.get(c, :subject_id) == @user_id end)}
-            <li
-              data-role="remove_from_circle"
-              phx-value-id={@user_id}
-              phx-value-circle={id(circle)}
-              :on-click="remove"
-              class="bg-base-content/5 rounded-md"
-            >
-              <div class="flex !px-2 items-center justify-between">
+            <li class="bg-base-content/5 rounded-md">
+              <button
+                class="flex !px-2 items-center justify-between"
+                data-role="remove_from_circle"
+                phx-value-id={@user_id}
+                phx-value-circle={id(circle)}
+                :on-click="remove"
+                type="button"
+              >
                 <div class="flex items-center gap-3">
                   <div class="w-10 h-10 flex place-content-center items-center rounded bg-info/10">
                     <#Icon iconify="pajamas:group" class="w-5 h-5 text-base-content" />
@@ -40,17 +41,18 @@
                   </div>
                 </div>
                 <#Icon iconify="fluent:checkmark-16-filled" class="w-4 h-4 text-success mr-2" />
-              </div>
+              </button>
             </li>
           {#else}
-            <li
-              data-role="add_to_circle"
-              phx-value-id={@user_id}
-              phx-value-circle={id(circle)}
-              :on-click="add"
-              class=""
-            >
-              <div class="flex !px-2 items-center justify-between">
+            <li class="">
+              <button
+                data-role="add_to_circle"
+                phx-value-id={@user_id}
+                phx-value-circle={id(circle)}
+                :on-click="add"
+                type="button"
+                class="flex !px-2 items-center justify-between"
+              >
                 <div class="flex items-center gap-3">
                   <div class="w-10 h-10 flex place-content-center items-center rounded bg-info/10">
                     <#Icon iconify="pajamas:group" class="w-5 h-5 text-base-content" />
@@ -66,7 +68,7 @@
                     </div>
                   </div>
                 </div>
-              </div>
+              </button>
             </li>
           {/if}
         {/for}

diff --git a/lib/web/components/circles/circle_live.sface b/lib/web/components/circles/circle_live.sface
@@ -11,13 +11,7 @@
         phx-change="multi_select"
         class="max-w-[300px] w-full flex-1"
       >
-        <!-- WIP: Not working when using live_select on a stateful component -->
-        <!-- <Bonfire.UI.Common.MultiselectLive
-          implementation={:live_select}
-          event_target="#edit_circle_participant"
-          form_input_name={__MODULE__}
-          label={l("Search for users to add")}
-          /> -->
+        <label for={"multi_select_#{__MODULE__}_text_input"} class="sr-only">{l("Search for users to add")}</label>
         <Bonfire.UI.Common.MultiselectLive
           implementation={:live_select}
           form_input_name={__MODULE__}
@@ -38,9 +32,11 @@
             form_opts={%{"phx-submit" => "Bonfire.Boundaries:edit"}}
           >
             <div class="w-full mt-4 form-control">
+              <label for="name" class="label">{l("Edit the circle name")}</label>
               <input type="hidden" name="circle_id" value={e(@circle, :id, nil)}>
               <div class="flex items-center">
                 <input
+                  id="name"
                   name="named[name]"
                   value={e(@circle, :named, :name, nil)}
                   type="text"
@@ -50,7 +46,11 @@
               </div>
             </div>
 
-            <button type="submit" class="w-full mt-3 normal-case btn btn-primary">{l("Save")}</button>
+            <button
+              data-role="edit_name_submit"
+              type="submit"
+              class="w-full mt-3 normal-case btn btn-primary"
+            >{l("Save")}</button>
             <:open_btn>
               <div class="btn btn-neutral h-10 min-h-10">
                 {l("Edit circle")}</div>

diff --git a/lib/web/components/circles/new_circle_live.sface b/lib/web/components/circles/new_circle_live.sface
@@ -1,23 +1,23 @@
 <div class="">
   <div x-data="{ name: '' }" class="w-full mt-3">
     <div class="w-full form-control">
-      <div class="flex items-center">
-        <input
-          x-model="name"
-          id="name"
-          name="named[name]"
-          type="text"
-          placeholder={l("Type the circle name")}
-          class="w-full input input-bordered"
-        />
-      </div>
+      <label for="name" class="label">
+        <span class="label-text">{l("Enter a name for the circle")}</span>
+      </label>
+      <input
+        x-model="name"
+        id="name"
+        name="named[name]"
+        type="text"
+        placeholder={l("The circle name...")}
+        class="w-full input input-bordered"
+      />
     </div>
     <input type="hidden" name="scope" value={@scope}>
     {!-- phx-click="Bonfire.Boundaries:circle_create"
       phx-value-no_redirect={if @setting_boundaries, do: "1"}
       :phx-value-name="name" --}
     <button
-      x-bind:disabled="name.length == 0"
       type="submit"
       data-role="new_circle_submit"
       class="w-full mt-3 normal-case btn btn-primary"

diff --git a/lib/web/components/display/yes_maybe_false_live.sface b/lib/web/components/display/yes_maybe_false_live.sface
@@ -17,6 +17,8 @@
   <div class="flex items-center boundaries-switches">
     <div class="border p-1 flex items-center gap-1 border-base-content/10 rounded-xl">
       <button
+        data-id={"#{@role}_#{@verb}_can"}
+        data-value={"#{@role}_#{@verb}_#{@value}"}
         class={
           "text-base-content/70 p-1 rounded-lg hover:bg-base-content/10 transition-colors duration-100",
           "bg-success hover:bg-success text-success-content": @value == :can
@@ -28,8 +30,10 @@
         phx-target={@event_target}
       >
         <#Icon solid="Check" class="w-4 h-4" />
+        <span class="sr-only">{l("Can")}</span>
       </button>
       <button
+        data-id={"#{@role}_#{@verb}_undefined"}
         class={
           "text-base-content/70 p-1 rounded-lg hover:bg-base-content/10 transition-colors duration-100",
           "bg-neutral hover:bg-neutral text-neutral-content": @value == nil
@@ -41,8 +45,10 @@
         phx-target={@event_target}
       >
         <#Icon solid="Minus" class="w-4 h-4" />
+        <span class="sr-only">{l("Undefined")}</span>
       </button>
       <button
+        data-id={"#{@role}_#{@verb}_cannot"}
         class={
           "text-base-content/70 p-1 rounded-lg hover:bg-base-content/10 transition-colors duration-100",
           "bg-error hover:bg-error text-error-content": @value == :cannot
@@ -54,6 +60,7 @@
         phx-target={@event_target}
       >
         <#Icon solid="X" class="w-4 h-4" />
+        <span class="sr-only">{l("Cannot")}</span>
       </button>
     </div>
     <!-- <form

diff --git a/lib/web/components/roles/new_role_live.sface b/lib/web/components/roles/new_role_live.sface
@@ -11,17 +11,17 @@
     </div>
     <div class="w-full mt-4">
       <div class="w-full form-control">
-        {!-- <label class="label">
-          <span class="font-medium label-text">{l("Enter a name for the role")}</span>
-        </label> --}
-        <div class="flex items-center">
-          <input
-            name="name"
-            type="text"
-            placeholder={l("Type the role name")}
-            class="w-full input input-bordered"
-          />
-        </div>
+        <label for="new_role_name" class="label">
+          <span class="label-text">{l("Enter a name for the role")}</span>
+        </label>
+        <input
+          id="new_role_name"
+          data-role="role_name"
+          name="name"
+          type="text"
+          placeholder={l("The role name...")}
+          class="w-full input input-bordered"
+        />
       </div>
 
       {!-- <div class="form-control mt-4">

diff --git a/lib/web/components/roles/tabled_roles/tabled_roles_live.sface b/lib/web/components/roles/tabled_roles/tabled_roles_live.sface
@@ -43,11 +43,20 @@
             <td :for={{verb, status} <- verbs}>
               {#case status}
                 {#match :can}
-                  <#Icon iconify="carbon:checkmark-filled" class="text-success text-center mx-auto w-5 h-5" />
+                  <div data-value={"#{role}_#{verb}_can"}>
+                    <#Icon iconify="carbon:checkmark-filled" class="text-success text-center mx-auto w-5 h-5" />
+                    <span class="sr-only">{l("Can")}</span>
+                  </div>
                 {#match :cannot}
-                  <#Icon iconify="bx:block" class="text-error text-center mx-auto w-5 h-5" />
+                  <div data-value={"#{role}_#{verb}_cannot"}>
+                    <#Icon iconify="bx:block" class="text-error text-center mx-auto w-5 h-5" />
+                    <span class="sr-only">{l("Cannot")}</span>
+                  </div>
                 {#match _}
-                  <#Icon iconify="heroicons-solid:minus" class="text-base-content/30 w-5 h-5 text-center mx-auto" />
+                  <div data-value={"#{role}_#{verb}_undefined"}>
+                    <#Icon iconify="heroicons-solid:minus" class="text-base-content/30 w-5 h-5 text-center mx-auto" />
+                    <span class="sr-only">{l("Undefined")}</span>
+                  </div>
               {/case}
             </td>
           {/if}
@@ -60,13 +69,19 @@
               title_text={l("Role Details")}
               no_actions
             >
-              <form phx-submit="Bonfire.Boundaries:role_edit_details">
+              <form id={"edit_role_form_#{role}"} phx-submit="Bonfire.Boundaries:role_edit_details">
                 <div class="w-full mt-4 form-control">
-                  <label class="label">
+                  <label for="new_name" class="label">
                     <span class="label-text">{l("Edit the role name")}</span>
                   </label>
                   <input type="hidden" name="old_name" value={role}>
-                  <input type="text" name="new_name" value={role} class="w-full input input-bordered">
+                  <input
+                    type="text"
+                    id="new_name"
+                    name="new_name"
+                    value={role}
+                    class="w-full input input-bordered"
+                  />
                 </div>
                 <button type="submit" class="btn w-full btn-primary mt-4">
                   {l("Save")}
@@ -81,7 +96,7 @@
                 <p class="text-error mt-2 text-sm">
                   {l("Warning:This action cannot be undone.")}
                 </p>
-                <form phx-submit="Bonfire.Boundaries:role_delete">
+                <form id={"delete_role_form_#{role}"} phx-submit="Bonfire.Boundaries:role_delete">
                   <input type="hidden" name="name" value={role}>
                   <button type="submit" class="btn w-full btn-error mt-4">
                     {l("Delete")}
@@ -90,10 +105,10 @@
               </div>
 
               <:open_btn>
-                <button class="btn btn-sm btn-circle btn-outline">
+                <div class="btn btn-sm btn-circle btn-outline">
                   <#Icon iconify="ph:gear-fill" class="w-4 h-4 opacity-80" />
-                  <span class="sr-only">{l("Edit Role")}</span>
-                </button>
+                  <span class="sr-only">{l("Edit role")}</span>
+                </div>
               </:open_btn>
             </Bonfire.UI.Common.OpenModalLive>
           </td>

diff --git a/test/support/conn_case.ex b/test/support/conn_case.ex
@@ -25,7 +25,7 @@ defmodule Bonfire.UI.Boundaries.ConnCase do
 
       import Bonfire.UI.Common.Testing.Helpers
 
-      import Phoenix.LiveViewTest
+      # import Phoenix.LiveViewTest
       # import Bonfire.UI.Boundaries.ConnCase, async: true
       import PhoenixTest
 

diff --git a/test/web/block_test.exs b/test/web/block_test.exs
@@ -4,11 +4,7 @@ defmodule Bonfire.Boundaries.BlockTest do
 
   alias Bonfire.Social.Fake
   alias Bonfire.Posts
-  alias Bonfire.Social.Graph.Follows
-  alias Bonfire.Me.Users
   alias Bonfire.Files.Test
-  import Bonfire.Common.Enums
-  import Bonfire.UI.Me
 
   setup do
     account = fake_account!()
@@ -408,7 +404,7 @@ defmodule Bonfire.Boundaries.BlockTest do
       bob: bob,
       carl: carl
     } do
-      {:ok, me} = Users.make_admin(me)
+      {:ok, me} = Bonfire.Me.Users.make_admin(me)
       assert {:ok, _ghost} = Bonfire.Boundaries.Blocks.block(alice, :ghost, :instance_wide)
 
       conn
@@ -427,7 +423,7 @@ defmodule Bonfire.Boundaries.BlockTest do
       carl: carl
     } do
       assert {:ok, _ghost} = Bonfire.Boundaries.Blocks.block(alice, :silence, :instance_wide)
-      {:ok, me} = Users.make_admin(me)
+      {:ok, me} = Bonfire.Me.Users.make_admin(me)
 
       conn
       |> visit("/boundaries/instance_silenced")

diff --git a/test/web/boundary_presets_test.exs b/test/web/boundary_presets_test.exs
@@ -0,0 +1,37 @@
+defmodule Bonfire.Boundaries.BoundaryPresetsTest do
+  use Bonfire.UI.Boundaries.ConnCase, async: true
+  @moduletag :ui
+
+  alias Bonfire.Social.Fake
+  alias Bonfire.Posts
+  alias Bonfire.Files.Test
+
+  setup do
+    account = fake_account!()
+    me = fake_user!(account)
+    alice = fake_user!(account)
+    bob = fake_user!(account)
+    carl = fake_user!(account)
+    conn = conn(user: me, account: account)
+
+    {:ok, conn: conn, account: account, me: me, alice: alice, bob: bob, carl: carl}
+  end
+
+  test "I can create a new preset" do
+  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
+  end
+
+  test "I can edit a preset I've previously created" do
+  end
+
+  test "I can delete a preset I've previously created" do
+  end
+
+  test "I can pick the preset previously created from the list of presets on composer" do
+  end
+end