Added logos & case-insensitive sorting of credential types (#3107)

* square images if they exist

* images on if they're present

* remove humanize, fix oauth-2 path

* run formatter

* changelog

* try static path

* Manifest from envs instead of static path

* No parenthesis for functions with no params

* Few tests for coverage

* allow failed image path

* use object to avoid showing non-existent images

* run formatter

* fix failing test

---------

Co-authored-by: Elias W. BA <[email protected]>
Co-authored-by: Frank Midigo <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -44,6 +44,8 @@ and this project adheres to
   - `phoenix` from 1.7.20 to 1.7.21
   - `phoenix_live_view` from 1.0.5 to 1.0.9
   - `petal_components` from 2.9.0 to 3.0.1
+- Added logos & case-insensitive sorting of credential types
+  [#3107](https://github.com/OpenFn/lightning/pull/3107)
 - Added a "BETA" label to the Kafka trigger type
   [#3098](https://github.com/OpenFn/lightning/pull/3098)
 

lib/lightning_web/live/components/form.ex

@@ -384,7 +384,7 @@ defmodule LightningWeb.Components.Form do
         <%= PhoenixHTMLHelpers.Form.label(@form, @field, @opts) do %>
           <div class="flex items-center">
             {@title}
-            <img :if={@logo} src={@logo} class="w-3 h-3 ml-1" />
+            <object :if={@logo} data={@logo} type="image/png" class="w-3 h-3 ml-1" />
           </div>
         <% end %>
         <LightningWeb.Components.Common.tooltip
@@ -396,7 +396,7 @@ defmodule LightningWeb.Components.Form do
       <%= PhoenixHTMLHelpers.Form.label(@form, @field, @opts) do %>
         <div class="flex items-center">
           {@title}
-          <img :if={@logo} src={@logo} class="w-3 h-3 ml-1" />
+          <object :if={@logo} data={@logo} type="image/png" class="w-3 h-3 ml-1" />
         </div>
       <% end %>
     <% end %>

lib/lightning_web/live/credential_live/credential_form_component.ex

@@ -532,15 +532,22 @@ defmodule LightningWeb.CredentialLive.CredentialFormComponent do
       Path.wildcard("#{schemas_path}/*.json")
       |> Enum.map(fn p ->
         name = p |> Path.basename() |> String.replace(".json", "")
-        {Phoenix.Naming.humanize(name), name, nil, nil}
+
+        image_path =
+          Routes.static_path(
+            LightningWeb.Endpoint,
+            "/images/adaptors/#{name}-square.png"
+          )
+
+        {name, name, image_path, nil}
       end)
 
     schemas_options
     |> Enum.reject(fn {_, name, _, _} ->
       name in ["googlesheets", "gmail", "collections"]
     end)
     |> Enum.concat([{"Raw JSON", "raw", nil, nil}])
-    |> Enum.sort_by(& &1, :asc)
+    |> Enum.sort_by(&String.downcase(elem(&1, 0)), :asc)
   end
 
   defp list_users do
@@ -673,10 +680,10 @@ defmodule LightningWeb.CredentialLive.CredentialFormComponent do
         get_type_options(schemas_path)
         |> Enum.concat(
           Enum.map(oauth_clients, fn client ->
-            {client.name, client.id, nil, "oauth"}
+            {client.name, client.id, "/images/oauth-2.png", "oauth"}
           end)
         )
-        |> Enum.sort()
+        |> Enum.sort_by(&String.downcase(elem(&1, 0)), :asc)
       else
         []
       end

priv/static/images/oauth-2.png

@@ -986,69 +986,6 @@ defmodule LightningWeb.CredentialLiveTest do
       {_path, flash} = assert_redirect(index_live)
       assert flash == %{"info" => "Credential updated successfully"}
     end
-
-    # test "blocks credential transfer to invalid owner; allows to valid owner", %{
-    #   conn: conn,
-    #   user: first_owner,
-    #   credential: credential_1
-    # } do
-    #   user_2 = insert(:user)
-    #   user_3 = insert(:user)
-
-    #   project =
-    #     insert(:project,
-    #       name: "myproject",
-    #       project_users: [%{user_id: first_owner.id}, %{user_id: user_2.id}]
-    #     )
-
-    #   credential =
-    #     insert(:credential,
-    #       user: first_owner,
-    #       name: "the one for giving away",
-    #       project_credentials: [
-    #         %{project: project, credential: nil}
-    #       ]
-    #     )
-
-    #   {:ok, index_live, html} = live(conn, ~p"/credentials")
-
-    #   # both credentials appear in the list
-    #   assert html =~ credential_1.name
-    #   assert html =~ credential.name
-
-    #   assert html =~ first_owner.id
-    #   assert html =~ user_2.id
-    #   assert html =~ user_3.id
-
-    #   assert index_live
-    #          |> form("#credential-form-#{credential.id}",
-    #            credential: Map.put(@update_attrs, :user_id, user_3.id)
-    #          )
-    #          |> render_change() =~ "Invalid owner"
-
-    #   #  Can't transfer to user who doesn't have access to right projects
-    #   assert index_live |> submit_disabled()
-
-    #   {:ok, _index_live, html} =
-    #     index_live
-    #     |> form("#credential-form-#{credential.id}",
-    #       credential: %{
-    #         body: "{\"a\":\"new_secret\"}",
-    #         user_id: user_2.id
-    #       }
-    #     )
-    #     |> render_submit()
-    #     |> follow_redirect(
-    #       conn,
-    #       ~p"/credentials"
-    #     )
-
-    #   # Once the transfer is made, the credential should not show up in the list
-
-    #   assert html =~ "Credential updated successfully"
-    #   assert html =~ credential_1.name
-    #   refute html =~ "the one for giving away"
-    # end
   end
 
   describe "Authorizing an oauth credential" do
@@ -3152,6 +3089,27 @@ defmodule LightningWeb.CredentialLiveTest do
     end
   end
 
+  describe "credential type picker modal" do
+    test "displays credential type modal with icons", %{conn: conn} do
+      {:ok, _view, html} = live(conn, ~p"/credentials")
+
+      html_tree = Floki.parse_document!(html)
+
+      for adaptor <- ["postgresql", "dhis2", "http"] do
+        adaptor_label =
+          Floki.find(
+            html_tree,
+            "label[for='credential-schema-picker_selected_#{adaptor}']"
+          )
+
+        adaptor_icon = Floki.find(adaptor_label, "object")
+        assert length(adaptor_icon) > 0
+        img_src = adaptor_icon |> Floki.attribute("data") |> List.first()
+        assert img_src =~ "/images/adaptors/#{adaptor}-square.png"
+      end
+    end
+  end
+
   defp wait_for_assigns(live, key, id) do
     Enum.reduce_while(1..10, nil, fn n, _ ->
       {_mod, assigns} =