feat: update to Phoenix HTML 4.1, bump dependencies (#4277)

* feat: update to Phenix HTML 4.1

* fix: updating to the new Gettext.Backend approach

* chore: update pot files ro locale version 45.0.0

* fix: downgrade cloack back to 1.1.2

* revert: merge of mix.lock

* fix: new syntax for field name generation for phx-feedback-for

* Revert "fix: new syntax for field name generation for phx-feedback-for"

This reverts commit 4d95e4f.

* fix: downgrade floki back to 0.35.2

* Revert "fix: downgrade floki back to 0.35.2"

This reverts commit a4f0b6b.

* fix: ensure floki nil is handled

* style: linter findings

* Revert "fix: ensure floki nil is handled"

* fix: new syntax for field name generation for phx-feedback-for

* debug: floki paramter error

* Revert "debug: floki paramter error"

This reverts commit 6192026.

* fix: Remove unnecessary code in settings_test.exs which breaks floki 0.36+

Author: JakobLichterfeld

lib/teslamate_web.ex

@@ -27,7 +27,7 @@ defmodule TeslaMateWeb do
       use Phoenix.Controller, namespace: TeslaMateWeb
 
       import Plug.Conn
-      import TeslaMateWeb.Gettext
+      use Gettext, backend: TeslaMateWeb.Gettext
       alias TeslaMateWeb.Router.Helpers, as: Routes
 
       unquote(verified_routes())
@@ -79,22 +79,24 @@ defmodule TeslaMateWeb do
   def channel do
     quote do
       use Phoenix.Channel
-      import TeslaMateWeb.Gettext
+      use Gettext, backend: TeslaMateWeb.Gettext
     end
   end
 
   defp view_helpers do
     quote do
-      # Use all HTML functionality (forms, tags, etc)
-      use Phoenix.HTML
+      # Import all HTML functionality (forms, tags, etc)
+      import Phoenix.HTML
+      import Phoenix.HTML.Form
+      use PhoenixHTMLHelpers
 
       # Import convenience functions for LiveView rendering
       import Phoenix.LiveView.Helpers
       # Import basic rendering functionality (render, render_layout, etc)
       import Phoenix.View
 
       import TeslaMateWeb.ErrorHelpers
-      import TeslaMateWeb.Gettext
+      use Gettext, backend: TeslaMateWeb.Gettext
       alias TeslaMateWeb.Router.Helpers, as: Routes
 
       unquote(verified_routes())

lib/teslamate_web/gettext.ex

@@ -5,7 +5,7 @@ defmodule TeslaMateWeb.Gettext do
   By using [Gettext](https://hexdocs.pm/gettext),
   your module gains a set of macros for translations, for example:
 
-      import TeslaMateWeb.Gettext
+      use Gettext, backend: TeslaMateWeb.Gettext
 
       # Simple translation
       gettext("Here is the string to translate")
@@ -20,5 +20,5 @@ defmodule TeslaMateWeb.Gettext do
 
   See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
   """
-  use Gettext, otp_app: :teslamate
+  use Gettext.Backend, otp_app: :teslamate
 end

lib/teslamate_web/live/car_live/summary.ex

@@ -1,7 +1,7 @@
 defmodule TeslaMateWeb.CarLive.Summary do
   use TeslaMateWeb, :live_view
 
-  import TeslaMateWeb.Gettext
+  use Gettext, backend: TeslaMateWeb.Gettext
 
   alias TeslaMate.Vehicles.Vehicle.Summary
   alias TeslaMate.Vehicles.Vehicle

lib/teslamate_web/live/charge_live/cost.ex

@@ -7,7 +7,7 @@ defmodule TeslaMateWeb.ChargeLive.Cost do
   alias TeslaMate.Log.ChargingProcess
   alias TeslaMate.Log
 
-  import TeslaMateWeb.Gettext
+  use Gettext, backend: TeslaMateWeb.Gettext
 
   on_mount {TeslaMateWeb.InitAssigns, :locale}
 

lib/teslamate_web/live/charge_live/cost.html.heex

@@ -1,7 +1,7 @@
 <nav class="breadcrumb" aria-label="breadcrumbs">
   <ul>
-    <li><%= live_redirect(gettext("Home"), to: ~p"/") %></li>
-    <li class="is-active"><%= live_redirect(gettext("Charge Cost"), to: "") %></li>
+    <li><.link navigate={~p"/"}><%= gettext("Home") %></.link></li>
+    <li class="is-active"><.link navigate=""><%= gettext("Charge Cost") %></.link></li>
   </ul>
 </nav>
 

lib/teslamate_web/live/geofence_live/form.ex

@@ -161,7 +161,7 @@ defmodule TeslaMateWeb.GeoFenceLive.Form do
         socket
         |> assign(geofence: geofence)
         |> put_flash(:success, flash_msg(action, name))
-        |> push_redirect(to: Routes.live_path(socket, GeoFenceLive.Index))
+        |> push_navigate(to: Routes.live_path(socket, GeoFenceLive.Index))
 
       {:ok, socket}
     end

lib/teslamate_web/live/geofence_live/form.html.heex

@@ -1,7 +1,7 @@
 <nav class="breadcrumb" aria-label="breadcrumbs">
   <ul>
-    <li><%= live_redirect(gettext("Home"), to: ~p"/") %></li>
-    <li><%= live_redirect(gettext("Geo-Fences"), to: ~p"/geo-fences") %></li>
+    <li><.link navigate={~p"/"}><%= gettext("Home") %></.link></li>
+    <li><.link navigate={~p"/geo-fences"}><%= gettext("Geo-Fences") %></.link></li>
     <li class="is-active">
       <a href="#">
         <%= case @action do
@@ -120,10 +120,9 @@
     <div class="field-body">
       <div class="field is-grouped">
         <div class="control">
-          <%= live_redirect(gettext("Back"),
-            to: Routes.live_path(@socket, GeoFenceLive.Index),
-            class: "button"
-          ) %>
+          <.link navigate={Routes.live_path(@socket, GeoFenceLive.Index)} class="button">
+            <%= gettext("Back") %>
+          </.link>
         </div>
         <div class="control">
           <%= submit(gettext("Save"),

lib/teslamate_web/live/geofence_live/index.html.heex

@@ -1,20 +1,21 @@
 <nav class="breadcrumb" aria-label="breadcrumbs">
   <ul>
-    <li><%= live_redirect(gettext("Home"), to: ~p"/") %></li>
-    <li class="is-active"><%= live_redirect(gettext("Geo-Fences"), to: ~p"/geo-fences") %></li>
+    <li><.link navigate={~p"/"}><%= gettext("Home") %></.link></li>
+    <li class="is-active">
+      <.link navigate={~p"/geo-fences"}><%= gettext("Geo-Fences") %></.link>
+    </li>
   </ul>
 </nav>
 
-<%= live_redirect(
-  raw("""
-  <span>#{gettext("Create")}</span>
+<.link
+  navigate={Routes.live_path(@socket, TeslaMateWeb.GeoFenceLive.Form)}
+  class="button is-info is-small is-rounded is-pulled-right mb-4"
+>
+  <span><%= gettext("Create") %></span>
   <span class="icon">
     <span class="mdi mdi-plus"></span>
   </span>
-  """),
-  to: Routes.live_path(@socket, TeslaMateWeb.GeoFenceLive.Form),
-  class: "button is-info is-small is-rounded is-pulled-right mb-4"
-) %>
+</.link>
 
 <table class="table is-fullwidth">
   <thead class="is-hidden-mobile">
@@ -43,13 +44,12 @@
         <td>
           <div class="field is-grouped is-pulled-right">
             <p class="control">
-              <%= live_redirect(
-                raw(
-                  "<span class='icon'><span class='mdi mdi-square-edit-outline'></span></span>"
-                ),
-                to: Routes.live_path(@socket, TeslaMateWeb.GeoFenceLive.Form, geofence, []),
-                class: "button is-info is-small is-inverted is-light"
-              ) %>
+              <.link
+                navigate={Routes.live_path(@socket, TeslaMateWeb.GeoFenceLive.Form, geofence, [])}
+                class="button is-info is-small is-inverted is-light"
+              >
+                <span class="icon"><span class="mdi mdi-square-edit-outline"></span></span>
+              </.link>
             </p>
             <p class="control">
               <%= link(raw("<span class='icon'><span class='mdi mdi-trash-can'></span></span>"),

lib/teslamate_web/live/import_live/index.html.heex

@@ -1,7 +1,7 @@
 <nav class="breadcrumb" aria-label="breadcrumbs">
   <ul>
-    <li><%= live_redirect(gettext("Home"), to: ~p"/") %></li>
-    <li class="is-active"><%= live_redirect(gettext("TeslaFi Import"), to: "") %></li>
+    <li><.link navigate={~p"/"}><%= gettext("Home") %></.link></li>
+    <li class="is-active"><.link navigate=""><%= gettext("TeslaFi Import") %></.link></li>
   </ul>
 </nav>
 

lib/teslamate_web/live/settings_live/index.ex

@@ -171,7 +171,7 @@ defmodule TeslaMateWeb.SettingsLive.Index do
   end
 
   defp add_params(socket, params) do
-    push_redirect(socket, to: Routes.live_path(socket, __MODULE__, params), replace: true)
+    push_navigate(socket, to: Routes.live_path(socket, __MODULE__, params), replace: true)
   end
 
   defp prepare(%GlobalSettings{} = settings) do