ash_admin field rendered for :map attribute disappears on edit without any errors

Hi,

I am new to the language and library and getting to know things by building an app. I’ve run into a problem where the following :content attribute on the following Resource disappears when I try to type anything into the JSON editor input field in the ash_admin interface

Here is a video of the problem: issue_capture

In the terminal output I see the following. _target doesnt seem correct and im not sure if its a configuration issue on my end. It goes from content => undefined

[debug] HANDLE EVENT "validate" in AshAdmin.PageLive
  Component: AshAdmin.Components.Resource.Form
  Parameters: %{"_target" => ["form", "content"], "form" => %{"_form_type" => "update", "content" => "{\n  \"asda\": \"aasg\"\n}", "id" => "cf8b8181-de34-4f09-a086-a3224fad5d38", "publish_from" => "2024-07-25T22:33", "publish_to" => "", "summary" => "Test summary", "title" => "asdasdasdada"}}
[debug] Replied in 287µs
[debug] HANDLE EVENT "validate" in AshAdmin.PageLive
  Component: AshAdmin.Components.Resource.Form
  Parameters: %{"_target" => ["undefined"], "form" => %{"_form_type" => "update", "content" => "{\n  \"asda\": \"aasg\"\n}", "id" => "cf8b8181-de34-4f09-a086-a3224fad5d38", "publish_from" => "2024-07-25T22:33", "publish_to" => "", "summary" => "Test summary", "title" => "asdasdasdada"}}
defmodule ContentCove.Articles.Story do
  use Ash.Resource,
    otp_app: :content_cove,
    domain: ContentCove.Articles,
    data_layer: AshPostgres.DataLayer,
    extensions: [AshAdmin.Resource]

  postgres do
    table "stories"
    repo ContentCove.Repo
  end

  actions do
    defaults [:read, :destroy]
    default_accept [:title, :content, :summary, :publish_from, :publish_to]

    create :create do
      argument :tags, {:array, :uuid} do
        allow_nil? true
      end

      change relate_actor(:created_by)
      change relate_actor(:updated_by)
    end

    update :update do
      require_atomic? false

      argument :tags, {:array, :uuid} do
        allow_nil? true
      end

      change relate_actor(:created_by)
      change relate_actor(:updated_by)
      change manage_relationship(:tags, type: :append_and_remove)
    end

    read :by_id do
      argument :id, :uuid, allow_nil?: false
      get? true
      filter expr(id == ^arg(:id))
    end
  end

  attributes do
    uuid_primary_key :id
    create_timestamp :inserted_at
    update_timestamp :updated_at

    attribute :summary, :string

    attribute :publish_from, :utc_datetime do
      allow_nil? false
    end

    attribute :publish_to, :utc_datetime

    attribute :title, :string do
      allow_nil? false
    end

    attribute :content, :map do
      allow_nil? false
    end
  end

  relationships do
    belongs_to :created_by, ContentCove.Accounts.User do
      allow_nil? false
    end

    belongs_to :updated_by, ContentCove.Accounts.User do
      allow_nil? false
    end

    many_to_many :tags, ContentCove.Articles.Tag do
      through ContentCove.Articles.StoryTag
      source_attribute_on_join_resource :story_id
      destination_attribute_on_join_resource :tag_id
    end
  end
end

The field is basically just meant to be one that accepts any valid JSON atm.

I have a feeling this has maybe got to do with some sort of validation issue on the field but not too sure. Any help would be appreciated :slight_smile:

Thanks!

:thinking: interesting. Are there any console errors popping up?

Hi!

When I load the page I only see this error in the browser console

admin?domain=Article…6-a3224fad5d38:7432 
 LiveView asset version mismatch. JavaScript version 0.20.15 vs. server 1.0.0-rc.6. To avoid issues, please ensure that your assets use the same version as the server.

No errors in the terminal window when loading or saving despite the field in the UI for that field going boom.

When I type valid JSON into the input. I see update events logged to the console but the input disappears in a split second. I’ve attached the console log:

admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:7432  LiveView asset version mismatch. JavaScript version 0.20.15 vs. server 1.0.0-rc.6. To avoid issues, please ensure that your assets use the same version as the server.
onJoin @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:7432
(anonymous) @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:7833
after @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:9241
requestDOMUpdate @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:8590
(anonymous) @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:7833
(anonymous) @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:3124
matchReceive @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:3124
(anonymous) @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:3155
trigger @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:3471
(anonymous) @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:3265
trigger @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:3471
(anonymous) @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:4359
decode @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:3752
onConnMessage @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:4345
conn.onmessage @ admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:4080
admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:4542 phx-F-K4BXJ6kg857wMD mount:  -  {0: 1, 1: {…}, s: Array(3), c: {…}}
[NEW] Explain Console errors by using Copilot in Edge: click
         
         to explain an error. 
        Learn more
        
          
          
          Don't show again
        
admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:4542 phx-F-K4BXJ6kg857wMD update:  -  {c: {…}}c: 4: 0: 0: ""5: 0: " method=\"put\" id=\"form\" phx-change=\"validate\" phx-submit=\"save\" phx-target=\"4\""1: ""2: ""3: 0: {p: {…}, d: Array(3)}1: 0: {p: {…}, d: Array(5)}1: ""2: ""3: ""4: ""5: d: [Array(1)]p: 0: (6) ['<div>\n  <button phx-click="load"', '', '', ' type="button" class="flex py-2 ml-4 px-4 mt-2 bg-…ify-center items-center">\n    Load\n  </button>\n  ', '\n  ', '\n</div>']1: (3) ['\x3C!-- <AshAdmin.Components.Resource.Form.render_rel…n/components/resource/form.ex:358 (ash_admin) -->', '\n', '\x3C!-- </AshAdmin.Components.Resource.Form.render_relationship_input> -->']2: (5) ['\n    <label class="block text-sm font-medium text-gray-700" for="', '[', ']">\n      ', '\n    </label>\n    ', '\n  '][[Prototype]]: Object[[Prototype]]: Object[[Prototype]]: Object[[Prototype]]: Object[[Prototype]]: Object[[Prototype]]: Object1: {0: {…}}[[Prototype]]: Object[[Prototype]]: Object[[Prototype]]: Object
admin?domain=Articles&resource=Story&action_type=update&tab=update&table=&primary_key=cf8b8181-de34-4f09-a086-a3224fad5d38:4542 phx-F-K4BXJ6kg857wMD update:  -  {c: {…}}c: 4: 0: 0: ""5: {0: ' method="put" id="form" phx-change="validate" phx-submit="save" phx-target="4"', 1: '', 2: '', 3: {…}}[[Prototype]]: Object1: {0: {…}}[[Prototype]]: Object[[Prototype]]: Object[[Prototype]]: Object

My mix.exs deps are the following:

  defp deps do
    [
      {:picosat_elixir, "~> 0.2"},
      {:ash_admin, "~> 0.11.3"},
      {:ash_json_api, "~> 1.0"},
      {:ash_phoenix, "~> 2.0"},
      {:ash_authentication, "~> 4.0"},
      {:ash_authentication_phoenix, "~> 2.0"},
      {:ash_postgres, "~> 2.0"},
      {:spark, "~> 2.2.8"},
      {:ash, "~> 3.0"},
      {:igniter, "~> 0.2"},
      {:phoenix, "~> 1.7.14"},
      {:phoenix_ecto, "~> 4.5"},
      {:ecto_sql, "~> 3.10"},
      {:postgrex, ">= 0.0.0"},
      {:phoenix_html, "~> 4.1"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      # TODO bump on release to {:phoenix_live_view, "~> 1.0.0"},
      {:phoenix_live_view, "~> 1.0.0-rc.1", override: true},
      {:floki, ">= 0.30.0", only: :test},
      {:phoenix_live_dashboard, "~> 0.8.3"},
      {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.2", runtime: Mix.env() == :dev},
      {:heroicons,
       github: "tailwindlabs/heroicons",
       tag: "v2.1.1",
       sparse: "optimized",
       app: false,
       compile: false,
       depth: 1},
      {:swoosh, "~> 1.5"},
      {:finch, "~> 0.13"},
      {:telemetry_metrics, "~> 1.0"},
      {:telemetry_poller, "~> 1.0"},
      {:gettext, "~> 0.20"},
      {:jason, "~> 1.2"},
      {:dns_cluster, "~> 0.1.1"},
      {:bandit, "~> 1.5"}
    ]
  end

I have got this weird issue in vs-code too but I think its unrelated

Unable to find formatter for /home/deepc/Repos/content_cove/mix.exs: "** (Mix.Error) Formatter plugin Spark.Formatter cannot be found\n    (mix 1.17.2) lib/mix.ex:588: Mix.raise/2\n    (language_server 0.22.1) lib/language_server/mix_tasks/format.ex:302: anonymous fn/2 in Mix.Tasks.ElixirLSFormat.load_plugins/1\n    (elixir 1.17.2) lib/enum.ex:2531: Enum.\"-reduce/3-lists^foldl/2-0-\"/3\n    (language_server 0.22.1) lib/language_server/mix_tasks/format.ex:299: Mix.Tasks.ElixirLSFormat.load_plugins/1\n    (language_server 0.22.1) lib/language_server/mix_tasks/format.ex:362: Mix.Tasks.ElixirLSFormat.formatter_for_file/2\n    (language_server 0.22.1) lib/language_server/source_file.ex:277: ElixirLS.LanguageServer.SourceFile.formatter_for/3\n    (language_server 0.22.1) lib/language_server/providers/formatting.ex:13: ElixirLS.LanguageServer.Providers.Formatting.format/4\n    (language_server 0.22.1) lib/language_server/server.ex:1280: anonymous fn/3 in ElixirLS.LanguageServer.Server.handle_request_async/2\n"

mix deps.get doesnt seem to resolve it, spark is specified in my mix.exs and the .formatter file in the root dir

I’ve reproduced the error, will try to fix in the next day or two.

Can you try ash_admin from main? {:ash_admin, github: "ash-project/ash_admin"}

Yep that works! Thanks for the speedy assistance :slight_smile:

I wonder if you can help me with the following issues. I am not 100% sure they are related to ash however.

I see this error in the browser console:

LiveView asset version mismatch. JavaScript version 0.20.17 vs. server 1.0.0-rc.6. To avoid issues, please ensure that your assets use the same version as the server.

I cannot seem to figure out where it is getting the old asset version from. Could it be a case of LiveView not having updated one of their client-side files or maybe one of the deps? All my deps point to the latest releases

  defp deps do
    [
      {:picosat_elixir, "~> 0.2"},
      {:ash_admin, github: "ash-project/ash_admin"},
      {:ash_json_api, "~> 1.3"},
      {:ash_phoenix, "~> 2.0"},
      {:ash_authentication, "~> 4.0"},
      {:ash_authentication_phoenix, "~> 2.0"},
      {:ash_postgres, "~> 2.1"},
      {:spark, "~> 2.2"},
      {:ash, "~> 3.2"},
      {:igniter, "~> 0.3"},
      {:phoenix, "~> 1.7.14"},
      {:phoenix_ecto, "~> 4.5"},
      {:ecto_sql, "~> 3.10"},
      {:postgrex, ">= 0.0.0"},
      {:phoenix_html, "~> 4.1"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      # TODO bump on release to {:phoenix_live_view, "~> 1.0.0"},
      {:phoenix_live_view, "~> 1.0.0-rc.1", override: true},
      {:floki, ">= 0.30.0", only: :test},
      {:phoenix_live_dashboard, "~> 0.8.3"},
      {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.2", runtime: Mix.env() == :dev},
      {:heroicons,
       github: "tailwindlabs/heroicons",
       tag: "v2.1.1",
       sparse: "optimized",
       app: false,
       compile: false,
       depth: 1},
      {:swoosh, "~> 1.5"},
      {:finch, "~> 0.13"},
      {:telemetry_metrics, "~> 1.0"},
      {:telemetry_poller, "~> 1.0"},
      {:gettext, "~> 0.20"},
      {:jason, "~> 1.2"},
      {:dns_cluster, "~> 0.1.1"},
      {:bandit, "~> 1.5"}
    ]
  end

I cannot for the life of me figure out why the formatter wont work.

[Warn  - 2:16:48 PM] Unable to get formatter options for /home/deepc/Repos/content_cove/lib/content_cove/accounts/user.ex: ** (Mix.Error) Formatter plugin Spark.Formatter cannot be found
    (mix 1.17.2) lib/mix.ex:588: Mix.raise/2
    (language_server 0.22.1) lib/language_server/mix_tasks/format.ex:302: anonymous fn/2 in Mix.Tasks.ElixirLSFormat.load_plugins/1
    (elixir 1.17.2) lib/enum.ex:2531: Enum."-reduce/3-lists^foldl/2-0-"/3
    (language_server 0.22.1) lib/language_server/mix_tasks/format.ex:299: Mix.Tasks.ElixirLSFormat.load_plugins/1
    (language_server 0.22.1) lib/language_server/mix_tasks/format.ex:362: Mix.Tasks.ElixirLSFormat.formatter_for_file/2
    (language_server 0.22.1) lib/language_server/source_file.ex:277: ElixirLS.LanguageServer.SourceFile.formatter_for/3
    (language_server 0.22.1) lib/language_server/providers/formatting.ex:13: ElixirLS.LanguageServer.Providers.Formatting.format/4
    (language_server 0.22.1) lib/language_server/server.ex:1280: anonymous fn/3 in ElixirLS.LanguageServer.Server.handle_request_async/2

[Info  - 2:16:48 PM] Starting build with MIX_ENV: test MIX_TARGET: host
[Warn  - 2:16:49 PM] Unchecked dependencies for environment test:
[Warn  - 2:16:49 PM] * igniter (Hex package)
[Warn  - 2:16:49 PM]   the dependency does not match the requirement "~> 0.3", got "0.2.13"
[Warn  - 2:16:49 PM] * ash (Hex package)
[Warn  - 2:16:49 PM]   the dependency does not match the requirement "~> 3.2", got "3.1.8"
[Warn  - 2:16:49 PM] * ash_sql (Hex package)
[Warn  - 2:16:49 PM]   the dependency does not match the requirement ">= 0.2.23 and < 1.0.0-0", got "0.2.17"
[Error - 2:16:49 PM] Process #PID<0.3885.0> raised an exception
** (Mix.Error) Can't continue due to errors on dependencies
    (mix 1.17.2) lib/mix.ex:588: Mix.raise/2
    (mix 1.17.2) lib/mix/tasks/deps.loadpaths.ex:48: Mix.Tasks.Deps.Loadpaths.run/1
    (mix 1.17.2) lib/mix/task.ex:495: anonymous fn/3 in Mix.Task.run_task/5
    (mix 1.17.2) lib/mix/tasks/loadpaths.ex:37: Mix.Tasks.Loadpaths.run/1
    (mix 1.17.2) lib/mix/task.ex:495: anonymous fn/3 in Mix.Task.run_task/5
    (mix 1.17.2) lib/mix/tasks/compile.ex:153: Mix.Tasks.Compile.run/1
    (mix 1.17.2) lib/mix/task.ex:495: anonymous fn/3 in Mix.Task.run_task/5
    (language_server 0.22.1) lib/language_server/build.ex:442: ElixirLS.LanguageServer.Build.run_mix_compile/1
    (language_server 0.22.1) lib/language_server/build.ex:80: anonymous fn/3 in ElixirLS.LanguageServer.Build.build/3
    (stdlib 5.2.3) timer.erl:270: :timer.tc/2
    (language_server 0.22.1) lib/language_server/build.ex:20: anonymous fn/3 in ElixirLS.LanguageServer.Build.build/3
    (kernel 9.2.4) global.erl:477: :global.trans/4

The deps are there and up to date :thinking:

Try deleting the .elixir_ls folder

Thanks, took a bit of fiddling such as reinstalling the plugin too but it looks back to normal

Any idea about the LiveView asset version mismatch issue? Do you get the same?

I do notice this, yes. I’m not entirely sure what the fix is, but it does seem like a warning that can probably be safely ignored for now. We can figure it out further if there are other behavioral issues that arise.

Awesome thanks so much for your assistance. I’m enjoying learning and using your library so far! Quite intuitive for someone like myself from a Python/JS background. I’m still getting use to how the documentation in the ecosystem is structured and how to find the relevant information quickly within the docs. More real world examples would be awesome

For example something as simple as associating a user to a specific field automatically i.e a created_by field took some digging and I think only came across relate_actor by chance from a post within this forum. So simple to implement (thanks to your library) just finding out how to do such a thing terminology wise is something I’m still getting use to

Thanks again Zach!