Fix note delete modal for image notes. #344

assets/tailwindcss/objects/_objects.notes.css

@@ -17,6 +17,12 @@
   height: auto;
 }
 
+.notes-card figure {
+  max-width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+}
+
 .note-avatar {
   grid-area: avatar;
   display: flex;
@@ -32,6 +38,7 @@
 
 .note-note {
   grid-area: note;
+  min-width: 0;
   @apply u:break-words u:mb-8;
 }
 
@@ -45,7 +52,7 @@
   @apply u:flex u:flex-row u:gap-8 u:justify-end;
 }
 
-@media screen(sm) {
+@variant md {
   .notes-card {
     display: grid;
     grid-template-areas:

templates/note/notes.html.twig

@@ -45,14 +45,17 @@
 
 {% block modals %}
     {% for note in notes %}
-        <div class="micromodal-slide" id="note-delete-{{ note.id }}">
-            <div class="modal__overlay u:bg-gray-80 u:bg-opacity-50 u:flex u:justify-center u:absolute u:inset-0 u:z-[2001]">
-            <div class="u:bg-white u:p-16 u:m-16 u:rounded-8 u:w-[70%] u:sm:w-[30%] u:md:w-[20%] u:max-w-[90%]">
-                <p class="u:text-24 u:mb-4 u:font-700 ">{{ 'profile.notes.modal'|trans }}</p>
+        {% set preview = note.comment|purify|striptags|trim|truncate(150) %}
+        <div class="modal micromodal-slide" id="note-delete-{{ note.id }}" aria-hidden="true">
+            <div class="modal__overlay u:bg-gray-80 u:bg-opacity-50 u:flex u:justify-center u:items-center u:z-[2001]" tabindex="-1" data-micromodal-close>
+            <div class="u:bg-white u:p-16 u:m-16 u:rounded-8 u:w-[70%] u:sm:w-[30%] u:md:w-[20%] u:max-w-[90%] u:max-h-[80vh] u:overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="note-delete-{{ note.id }}-title">
+                <p class="u:text-24 u:mb-4 u:font-700" id="note-delete-{{ note.id }}-title">{{ 'profile.notes.modal'|trans }}</p>
                 <p class="u:text-16 u:mb-8">{{ 'profile.notes.delete'|trans }}</p>
                 <hr>
-                {{ note.comment|purify|truncate(150) }}
-                <hr>
+                {% if preview is not empty %}
+                    <p class="u:text-16 u:my-8">{{ preview }}</p>
+                    <hr>
+                {% endif %}
                 <footer class="u:flex u:flex-row u:justify-between">
                     <button class="o-button" data-micromodal-close>{{ 'profile.notes.no'|trans|capitalize }}</button>
                     <a href="{{ url('delete_note', {'username': note.member.username }) }}" class="o-button">{{ 'profile.notes.yes'|trans|capitalize }}</a>

templates/profile/profile.html.twig

@@ -21,4 +21,6 @@
         {% block page_content%}
         {% endblock page_content %}
     </div>
+    {% block modals %}
+    {% endblock modals %}
 {% endblock content %}

tests/Controller/NoteControllerTest.php

@@ -0,0 +1,82 @@
+<?php
+
+namespace App\Tests\Controller;
+
+use App\Entity\Member;
+use App\Entity\ProfileNote;
+use Doctrine\ORM\EntityManagerInterface;
+use PHPUnit\Framework\Attributes\Group;
+use Symfony\Bundle\FrameworkBundle\KernelBrowser;
+use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
+
+#[Group('integration')]
+/**
+ * @infection-ignore-all
+ */
+class NoteControllerTest extends WebTestCase
+{
+    public function testNotesPageRendersDeleteModalTargetAndTextOnlyPreviewForImageNotes(): void
+    {
+        $client = static::createClient();
+        $entityManager = $this->getEntityManager();
+        $owner = $this->reloadMember('member-2');
+        $contact = $this->reloadMember('member-5');
+        $note = $this->createImageNote($entityManager, $owner, $contact);
+
+        try {
+            $this->loginMember($client, $owner);
+
+            $crawler = $client->request('GET', '/members/' . $owner->getUsername() . '/notes');
+
+            $this->assertResponseIsSuccessful();
+            $trigger = $crawler->filter('[data-micromodal-trigger="note-delete-' . $note->getId() . '"]');
+            self::assertCount(1, $trigger);
+
+            $modal = $crawler->filter('#note-delete-' . $note->getId());
+            self::assertCount(1, $modal);
+            self::assertSame('true', $modal->attr('aria-hidden'));
+            self::assertStringContainsString('This is a test note.', $modal->text());
+            self::assertCount(0, $modal->filter('img'));
+            self::assertCount(0, $modal->filter('figure'));
+        } finally {
+            $entityManager->remove($note);
+            $entityManager->flush();
+        }
+    }
+
+    private function createImageNote(EntityManagerInterface $entityManager, Member $owner, Member $contact): ProfileNote
+    {
+        $note = new ProfileNote();
+        $note->setOwner($owner);
+        $note->setMember($contact);
+        $note->setCategory('Issue 344 regression');
+        $note->setComment(
+            '<figure class="image"><img src="/images/homepicture-1200px_2-min.jpg" alt="wide test image"></figure>'
+            . '<p>This is a test note.</p>'
+            . '<figure class="image"><img src="/images/homepicture-1200px_3-min.jpg" alt="wide test image"></figure>'
+        );
+        $entityManager->persist($note);
+        $entityManager->flush();
+
+        return $note;
+    }
+
+    private function loginMember(KernelBrowser $client, Member $member): void
+    {
+        $client->loginUser($member);
+    }
+
+    private function reloadMember(string $username): Member
+    {
+        $entityManager = $this->getEntityManager();
+        $member = $entityManager->getRepository(Member::class)->findOneBy(['username' => $username]);
+        $this->assertInstanceOf(Member::class, $member);
+
+        return $member;
+    }
+
+    private function getEntityManager(): EntityManagerInterface
+    {
+        return static::getContainer()->get(EntityManagerInterface::class);
+    }
+}