tech(pdf): replace wkhtmltopdf (no longer maintained) with grover

.eslintrc.json

@@ -23,6 +23,7 @@
     "no-use-before-define": "off",
     "react/jsx-props-no-spreading": "off",
     "jsx-a11y/no-autofocus": "off",
+    "react/function-component-definition": "off",
     "arrow-body-style": "off"
   }
 }

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ on: push
 jobs:
   linters:
     name: Linters
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - name: Set up Ruby
@@ -24,7 +24,7 @@ jobs:
         run: yarn lint
   test_unit:
     name: Unit Tests
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     services:
       postgres:
         image: postgres:13.2
@@ -87,7 +87,7 @@ jobs:
 
   test_features:
     name: Feature Tests
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     strategy:
       fail-fast: false
       matrix:
@@ -114,11 +114,17 @@ jobs:
           - 6379:6379
         options: --entrypoint redis-server
     steps:
+      - name: Disable AppArmor
+        # AppArmor restricts unprivileged user namespaces, which Puppeteer requires.
+        # https://chromium.googlesource.com/chromium/src/+/main/docs/security/apparmor-userns-restrictions.md
+        run: echo 0 | sudo tee /proc/sys/kernel/apparmor_restrict_unprivileged_userns
       - uses: actions/checkout@v4
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node-version-file: .node-version
+      - name: Installing Chrome for Puppeteer test
+        run: npx puppeteer browsers install chrome
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:

Gemfile

@@ -91,9 +91,8 @@ gem "addressable"
 
 gem "agent_connect", github: "gip-inclusion/agent_connect_engine"
 
-# Easily generate PDF from HTML
-gem "wicked_pdf"
-gem "wkhtmltopdf-binary"
+# Easily generate PDF from HTML with puppeteer and headless chrome
+gem "grover"
 
 # CORS support
 gem "rack-cors"

Gemfile.lock

@@ -245,6 +245,8 @@ GEM
       rake (>= 13)
     groupdate (6.5.1)
       activesupport (>= 7)
+    grover (1.2.3)
+      nokogiri (~> 1)
     hashdiff (1.1.2)
     hashery (2.1.2)
     hashie (5.0.0)
@@ -672,7 +674,6 @@ GEM
     with_advisory_lock (5.1.0)
       activerecord (>= 6.1)
       zeitwerk (>= 2.6)
-    wkhtmltopdf-binary (0.12.6.8)
     xpath (3.2.0)
       nokogiri (~> 1.8)
     zeitwerk (2.7.1)
@@ -709,6 +710,7 @@ DEPENDENCIES
   factory_bot_rails
   faraday
   groupdate
+  grover
   image_processing
   jbuilder (~> 2.7)
   jsbundling-rails
@@ -759,9 +761,7 @@ DEPENDENCIES
   tzinfo-data
   web-console (>= 3.3.0)
   webmock
-  wicked_pdf
   with_advisory_lock
-  wkhtmltopdf-binary
 
 RUBY VERSION
    ruby 3.4.1p0

app/controllers/invitations_controller.rb

@@ -67,7 +67,7 @@ def invite_user
   end
 
   def pdf
-    WickedPdf.new.pdf_from_string(invitation.content, encoding: "utf-8")
+    Grover.new(invitation.content).to_pdf
   end
 
   def pdf_filename

app/controllers/notifications_controller.rb

@@ -36,7 +36,7 @@ def notify_participation
   end
 
   def pdf
-    WickedPdf.new.pdf_from_string(notify_participation.notification.content, encoding: "utf-8")
+    Grover.new(notify_participation.notification.content).to_pdf
   end
 
   def pdf_filename

app/javascript/react/components/user/InvitationCell.jsx

@@ -32,55 +32,53 @@ export default observer(({ user, format }) => {
 
   return (
     user.list.canBeInvitedBy(format) && (
-      <>
-        <td>
-          {user.activeErrors.includes(actionType) ? (
-            <button
-              type="submit"
-              className="btn btn-danger"
-              onClick={() => handleInvitationClick()}
-            >
-              Afficher les erreurs
-            </button>
-          ) : (
-            <Tippy
-              onShow={() => user.lastInvitationDate(format) !== undefined}
-              content={
-                <span>
-                  {user.lastInvitationDate(format) &&
-                    `Dernière invitation ${format} le ${getFrenchFormatDateString(user.lastInvitationDate(format))}`
-                  }
-                  {user.lastInvitationDate(format) && user.lastParticipationRdvStartsAt() && <br />}
-                  {user.lastParticipationRdvStartsAt() &&
-                    `Dernier rendez-vous le ${getFrenchFormatDateString(user.lastParticipationRdvStartsAt())}`
-                  }
-                </span>
-              }
-            >
-              <div className="d-flex justify-content-center">
-                {user.lastInvitationDate(format) !== undefined && (
-                  <i className="ri-check-line d-block p-1" />
-                )}
-                <button
-                  type="submit"
-                  disabled={
-                    user.triggers[actionType] ||
-                    !user.createdAt ||
-                    !user.requiredAttributeToInviteBy(format) ||
-                    !user.belongsToCurrentOrg()
-                  }
-                    className={
-                      user.lastInvitationDate(format) === undefined ? `btn btn-primary btn-blue invitation-${format}` : `reinvitation-${format}`
-                    }
-                  onClick={() => handleInvitationClick()}
-                >
-                    {inviteButtonContent()}
-                </button>
-              </div>
-            </Tippy>
-          )}
-        </td>
-      </>
+      <td>
+        {user.activeErrors.includes(actionType) ? (
+          <button
+            type="submit"
+            className="btn btn-danger"
+            onClick={() => handleInvitationClick()}
+          >
+            Afficher les erreurs
+          </button>
+        ) : (
+          <Tippy
+            onShow={() => user.lastInvitationDate(format) !== undefined}
+            content={
+              <span>
+                {user.lastInvitationDate(format) &&
+                  `Dernière invitation ${format} le ${getFrenchFormatDateString(user.lastInvitationDate(format))}`
+                }
+                {user.lastInvitationDate(format) && user.lastParticipationRdvStartsAt() && <br />}
+                {user.lastParticipationRdvStartsAt() &&
+                  `Dernier rendez-vous le ${getFrenchFormatDateString(user.lastParticipationRdvStartsAt())}`
+                }
+              </span>
+            }
+          >
+            <div className="d-flex justify-content-center">
+              {user.lastInvitationDate(format) !== undefined && (
+                <i className="ri-check-line d-block p-1" />
+              )}
+              <button
+                type="submit"
+                disabled={
+                  user.triggers[actionType] ||
+                  !user.createdAt ||
+                  !user.requiredAttributeToInviteBy(format) ||
+                  !user.belongsToCurrentOrg()
+                }
+                className={
+                  user.lastInvitationDate(format) === undefined ? `btn btn-primary btn-blue invitation-${format}` : `reinvitation-${format}`
+                }
+                onClick={() => handleInvitationClick()}
+              >
+                {inviteButtonContent()}
+              </button>
+            </div>
+          </Tippy>
+        )}
+      </td>
     )
   );
 });

app/javascript/react/components/user/InvitationCells.jsx

@@ -10,13 +10,13 @@ export default function InvitationCells({ user }) {
     /* ----------------------------- Disabled invitations cases -------------------------- */
     user.isArchived() ? (
       <td colSpan={user.list.invitationsColSpan}>
-        Dossier archivé 
+        Dossier archivé
         {user.isArchivedInCurrentOrganisation() && (
           <Tippy
             content={
-              <>
+              <span>
                 Usager archivé pour le motif suivant : {user.archiveInCurrentOrganisation().archiving_reason}
-              </>
+              </span>
             }
           >
             <i className="ms-2 ri-information-fill" />
@@ -28,21 +28,19 @@ export default function InvitationCells({ user }) {
         L'usager n'appartient pas à une organisation qui gère ce type de rdv{" "}
         <Tippy
           content={
-            <>
+            <span>
               Ajoutez l'usager à une organisation qui gère ces rdvs en appuyant sur le boutton
               "Ajouter à une organisation" sur sa fiche, puis rechargez le fichier
-            </>
+            </span>
           }
         >
           <i className="ri-question-line" />
         </Tippy>
       </td>
     ) : user.currentFollowUpStatus === "rdv_pending" ? (
-      <>
-        <td colSpan={user.list.invitationsColSpan}>
-          {user.currentFollowUp.human_status} (le {getFrenchFormatDateString(user.currentPendingRdv.starts_at)})
-        </td>
-      </>
+      <td colSpan={user.list.invitationsColSpan}>
+        {user.currentFollowUp.human_status} (le {getFrenchFormatDateString(user.currentPendingRdv.starts_at)})
+      </td>
     ) : (
       /* ----------------------------- Enabled invitations cases --------------------------- */
 

app/javascript/react/components/user/ReferentAssignationCell.jsx

@@ -8,27 +8,25 @@ export default observer(({ user }) => {
   };
 
   return (
-    <>
-      {user.referentAlreadyAssigned() ? (
-        <Tippy
-          content={`Référent: ${user.referentFullName()}`}
-        >
-          <i className="ri-check-line" />
-        </Tippy>
-      ) : (
-        <button
-          type="submit"
-          disabled={!user.createdAt || user.triggers.referentAssignation}
-          className="btn btn-primary btn-blue"
-          onClick={() => handleReferentAssignationClick()}
-        >
-          <small>
-            {user.triggers.referentAssignation
-              ? "Assignation..."
-              : `Assigner ${user.referentEmail}`}
-          </small>
-        </button>
-      )}
-    </>
+    user.referentAlreadyAssigned() ? (
+      <Tippy
+        content={`Référent: ${user.referentFullName()}`}
+      >
+        <i className="ri-check-line" />
+      </Tippy>
+    ) : (
+      <button
+        type="submit"
+        disabled={!user.createdAt || user.triggers.referentAssignation}
+        className="btn btn-primary btn-blue"
+        onClick={() => handleReferentAssignationClick()}
+      >
+        <small>
+          {user.triggers.referentAssignation
+            ? "Assignation..."
+            : `Assigner ${user.referentEmail}`}
+        </small>
+      </button>
+    )
   );
 });