Upgrade Phoenix to 1.8, LiveView to 1.1

- Bump phoenix ~> 1.8, phoenix_live_view ~> 1.1, y_ex ~> 0.10.2,
  oban ~> 2.20, phoenix_storybook ~> 1.0, mix_test_watch ~> 1.4
- Add lazy_html test dependency (required by LiveView 1.1)
- Add :phoenix_live_view compiler to mix.exs compilers list
- Migrate ErrorView to format-specific ErrorHTML and ErrorJSON modules
  to match Phoenix 1.7+ conventions; update render_errors config and
  all put_view call sites across controllers and plugs
- Remove dead live routes for SettingsLive.Index and JobLive.Index
  that LiveView 1.1 now validates at compile time

Author: midigofrank

.github/workflows/main.yml

@@ -24,7 +24,7 @@ jobs:
           mix docs
 
       - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4.7.6
+        uses: JamesIves/github-pages-deploy-action@v4.8.0
         with:
           branch: gh-pages # The branch the action should deploy to.
           folder: doc # The folder the action should deploy.

Dockerfile

@@ -66,12 +66,12 @@ RUN mix lightning.install_adaptor_icons
 RUN mix lightning.install_schemas
 RUN npm install --prefix assets
 
-# compile assets
-RUN mix assets.deploy
-
 # Compile the release
 RUN mix compile
 
+# compile assets
+RUN mix assets.deploy
+
 # Changes to config/runtime.exs don't require recompiling the code
 COPY config/runtime.exs config/
 

assets/js/app.js

@@ -28,6 +28,7 @@ import * as Sentry from '@sentry/react';
 import { enableMapSet } from 'immer';
 import { Socket } from 'phoenix';
 import { LiveSocket } from 'phoenix_live_view';
+import { hooks as colocatedHooks } from 'phoenix-colocated/lightning';
 
 import topbar from '../vendor/topbar.cjs';
 
@@ -55,6 +56,7 @@ window.sentry = sentry;
 const hooks = {
   LogViewer,
   ...Hooks,
+  ...colocatedHooks,
 };
 
 // @ts-ignore

config/config.exs

@@ -23,8 +23,7 @@ config :hammer,
 config :lightning, LightningWeb.Endpoint,
   url: [host: "localhost"],
   render_errors: [
-    view: LightningWeb.ErrorView,
-    accepts: ~w(html json),
+    formats: [html: LightningWeb.ErrorHTML, json: LightningWeb.ErrorJSON],
     layout: false
   ],
   pubsub_server: Lightning.PubSub,
@@ -101,6 +100,7 @@ config :esbuild,
          --external:path
          --external:/fonts/*
          --external:/images/*
+         --alias:@=.
          js/app.js
          js/storybook.js
          js/editor/Editor.tsx
@@ -131,7 +131,9 @@ config :esbuild,
         end
       end),
     cd: Path.expand("../assets", __DIR__),
-    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+    env: %{
+      "NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]
+    }
   ]
 
 # https://fly.io/phoenix-files/tailwind-standalone/

config/dev.exs

@@ -127,6 +127,11 @@ config :phoenix, :stacktrace_depth, 20
 # Initialize plugs at runtime for faster development compilation
 config :phoenix, :plug_init_mode, :runtime
 
+config :phoenix_live_view,
+  debug_heex_annotations: true,
+  debug_attributes: true,
+  enable_expensive_runtime_checks: true
+
 config :lightning, :is_resettable_demo, true
 
 config :lightning, :apollo, endpoint: "http://localhost:3000", timeout: 30_000

lib/lightning_web/components/viewers.ex

@@ -16,7 +16,7 @@ defmodule LightningWeb.Components.Viewers do
   import React
 
   alias Lightning.Invocation.Dataclip
-  alias LightningWeb.Components.Icon
+  # alias LightningWeb.Components.Icon
   alias Phoenix.LiveView.JS
 
   require Lightning.Run
@@ -340,39 +340,6 @@ defmodule LightningWeb.Components.Viewers do
     """
   end
 
-  attr :id, :string, required: true
-
-  attr :type, :atom,
-    default: nil,
-    values: [nil | Dataclip.source_types()]
-
-  defp dataclip_type(assigns) do
-    assigns =
-      assign(assigns,
-        icon: Icon.dataclip_icon_class(assigns.type),
-        color: Icon.dataclip_icon_color(assigns.type)
-      )
-
-    ~H"""
-    <div
-      id={@id}
-      class={[
-        "absolute top-0 right-0 flex items-center gap-2 group z-10"
-      ]}
-    >
-      <div class="hidden group-hover:block font-mono text-white text-xs">
-        type: {@type}
-      </div>
-      <div class={[
-        "rounded-bl-md rounded-tr-md p-1 pt-0 opacity-70 group-hover:opacity-100 content-center",
-        @color
-      ]}>
-        <.icon :if={@icon} name={@icon} class="h-4 w-4 inline-block align-middle" />
-      </div>
-    </div>
-    """
-  end
-
   defp step_finished?(%{finished_at: %_{}}), do: true
 
   defp step_finished?(_other), do: false

lib/lightning_web/controllers/api/provisioning_controller.ex

@@ -87,7 +87,7 @@ defmodule LightningWeb.API.ProvisioningController do
         {:error, error} ->
           conn
           |> put_status(:forbidden)
-          |> put_view(LightningWeb.ErrorView)
+          |> put_view(json: LightningWeb.ErrorJSON)
           |> render(:"403",
             error:
               case error do

lib/lightning_web/views/error_view.ex …/lightning_web/controllers/error_html.exlib/lightning_web/views/error_view.ex renamed to lib/lightning_web/controllers/error_html.ex lib/lightning_web/views/error_view.ex renamed to lib/lightning_web/controllers/error_html.ex

@@ -1,14 +1,11 @@
-defmodule LightningWeb.ErrorView do
+defmodule LightningWeb.ErrorHTML do
   @moduledoc false
 
-  # This module needs to be changed to use Layouts
-  use LightningWeb, :view
-
-  use Phoenix.Component
+  use LightningWeb, :html
 
   def render("404.html", assigns) do
     ~H"""
-    <.logo_bar conn={@conn} />
+    <.logo_bar />
     <div class="min-h-[25em] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
       <div class="max-w-md w-full space-y-6 p-12 rounded-md shadow-md border bg-white">
         <div>
@@ -26,7 +23,7 @@ defmodule LightningWeb.ErrorView do
 
   def render("401.html", assigns) do
     ~H"""
-    <.logo_bar conn={@conn} />
+    <.logo_bar />
     <div class="min-h-[25em] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
       <div class="max-w-md w-full space-y-6 p-12 rounded-md shadow-md border bg-white">
         <div>
@@ -37,7 +34,7 @@ defmodule LightningWeb.ErrorView do
             :if={assigns[:error]}
             class="mt-4 p-4 text-xs font-mono text-gray-600 border rounded-md bg-gray-200 grid grid-cols-2 gap-2"
           >
-            <%= for {k,v} <- @error do %>
+            <%= for {k, v} <- @error do %>
               <div class="text-right font-bold">{k}</div>
               <div>{v}</div>
             <% end %>
@@ -48,40 +45,23 @@ defmodule LightningWeb.ErrorView do
     """
   end
 
+  def render(template, _assigns) do
+    Phoenix.Controller.status_message_from_template(template)
+  end
+
   defp logo_bar(assigns) do
     ~H"""
     <nav class="bg-secondary-800">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex items-center justify-between h-16">
           <div class="flex items-center">
             <div class="flex-shrink-0">
-              <img
-                class="h-8 w-8"
-                src={Routes.static_path(@conn, "/images/square-logo.png")}
-                alt="OpenFn"
-              />
+              <img class="h-8 w-8" src={~p"/images/square-logo.png"} alt="OpenFn" />
             </div>
           </div>
         </div>
       </div>
     </nav>
     """
   end
-
-  # By default, Phoenix returns the status message from
-  # the template name. For example, "404.html" becomes
-  # "Not Found".
-  def template_not_found(template, assigns) do
-    if String.match?(template, ~r/.json$/) do
-      %{
-        "error" =>
-          case assigns do
-            %{error: error} -> error
-            _ -> Phoenix.Controller.status_message_from_template(template)
-          end
-      }
-    else
-      Phoenix.Controller.status_message_from_template(template)
-    end
-  end
 end

lib/lightning_web/controllers/error_json.ex

@@ -0,0 +1,11 @@
+defmodule LightningWeb.ErrorJSON do
+  @moduledoc false
+
+  def render(_template, %{error: error}) do
+    %{"error" => error}
+  end
+
+  def render(template, _assigns) do
+    %{"error" => Phoenix.Controller.status_message_from_template(template)}
+  end
+end

lib/lightning_web/controllers/fallback_controller.ex

@@ -10,28 +10,28 @@ defmodule LightningWeb.FallbackController do
   def call(conn, {:error, :not_found}) do
     conn
     |> put_status(:not_found)
-    |> put_view(LightningWeb.ErrorView)
+    |> put_view(html: LightningWeb.ErrorHTML, json: LightningWeb.ErrorJSON)
     |> render(:"404")
   end
 
   def call(conn, {:error, :bad_request}) do
     conn
     |> put_status(:bad_request)
-    |> put_view(LightningWeb.ErrorView)
+    |> put_view(html: LightningWeb.ErrorHTML, json: LightningWeb.ErrorJSON)
     |> render(:"400")
   end
 
   def call(conn, {:error, :unauthorized}) do
     conn
     |> put_status(:unauthorized)
-    |> put_view(LightningWeb.ErrorView)
+    |> put_view(html: LightningWeb.ErrorHTML, json: LightningWeb.ErrorJSON)
     |> render(:"401")
   end
 
   def call(conn, {:error, :forbidden}) do
     conn
     |> put_status(:forbidden)
-    |> put_view(LightningWeb.ErrorView)
+    |> put_view(html: LightningWeb.ErrorHTML, json: LightningWeb.ErrorJSON)
     |> render(:"403")
   end
 
@@ -61,7 +61,7 @@ defmodule LightningWeb.FallbackController do
   def call(conn, {:error, error}) when is_map(error) do
     conn
     |> put_status(:unauthorized)
-    |> put_view(LightningWeb.ErrorView)
+    |> put_view(html: LightningWeb.ErrorHTML, json: LightningWeb.ErrorJSON)
     |> render(:"401", error: error)
   end
 end