Fix Credential Creation Page UI (#1520)

* Layout New Credential button and modal

* Fix 'Configure Credential' button

* Make form submission working

* Reorganize Credentials FormComponent

* Use credential modal for edit and Implement it in:
- the credential picker
- the user credentials

* Remove unused code

* ModalHook for closing credential modal in the credential picker

* Attempt to fix failing tests

* Update and fix tests

* Test: authorized project users can create new credentials in the project credentials page

* Fix authorization, remove credential edit module

* Avoid negating conditions

* Test: click on cancel button to close credential creation modal

* Fix Edit button problem

* Tweaks

* Fix, and adjust failing tests

* Revert New credential button to initial style

---------

Co-authored-by: Stuart Corbishley <[email protected]>

CHANGELOG.md

@@ -12,6 +12,8 @@ and this project adheres to
 
 - Add ellipsis for long job names on the canvas
   [#1217](https://github.com/OpenFn/Lightning/issues/1217)
+- Fix Credential Creation Page UI
+  [#1064](https://github.com/OpenFn/Lightning/issues/1064)
 
 ### Changed
 

assets/js/hooks/index.ts

@@ -7,6 +7,14 @@ import TabSelector from './TabSelector';
 
 export { LogLineHighlight, ElapsedIndicator, TabSelector };
 
+export const ModalHook = {
+  mounted() {
+    this.handleEvent('close_modal', () => {
+      this.liveSocket.execJS(this.el, this.el.getAttribute('phx-on-close'));
+    });
+  },
+} as PhoenixHook;
+
 export const ShowActionsOnRowHover = {
   mounted() {
     this.el.addEventListener('mouseenter', e => {

lib/lightning/policies/project_users.ex

@@ -23,6 +23,7 @@ defmodule Lightning.Policies.ProjectUsers do
           | :edit_project_description
           | :provision_project
           | :create_webhook_auth_method
+          | :create_project_credential
           | :edit_webhook_auth_method
 
   @doc """
@@ -80,6 +81,7 @@ defmodule Lightning.Policies.ProjectUsers do
              :rerun_job,
              :provision_project,
              :create_webhook_auth_method,
+             :create_project_credential,
              :edit_webhook_auth_method
            ],
       do: project_user.role in [:owner, :admin, :editor]

lib/lightning_web/components/core_components.ex

@@ -101,6 +101,8 @@ defmodule LightningWeb.CoreComponents do
     doc:
       "a form field struct retrieved from the form, for example: @form[:email]"
 
+  attr :errors, :any, required: false
+
   def old_error(%{field: field} = assigns) do
     assigns =
       assigns |> assign(:errors, Enum.map(field.errors, &translate_error(&1)))
@@ -110,6 +112,15 @@ defmodule LightningWeb.CoreComponents do
     """
   end
 
+  def old_error(%{errors: errors} = assigns) do
+    assigns =
+      assigns |> assign(:errors, Enum.map(errors, &translate_error(&1)))
+
+    ~H"""
+    <.error :for={msg <- @errors}><%= msg %></.error>
+    """
+  end
+
   def show_dropdown(js \\ %JS{}, id) when is_binary(id) do
     js
     |> JS.show(

lib/lightning_web/components/new_inputs.ex

@@ -15,7 +15,6 @@ defmodule LightningWeb.Components.NewInputs do
       <.button>Send!</.button>
       <.button phx-click="go" class="ml-2">Send!</.button>
   """
-  attr :id, :string, default: "no-id"
   attr :type, :string, default: "button", values: ["button", "submit"]
   attr :class, :string, default: nil
   attr :rest, :global, include: ~w(disabled form name value)
@@ -24,16 +23,18 @@ defmodule LightningWeb.Components.NewInputs do
   slot :inner_block, required: true
 
   def button(assigns) do
-    assigns = tooltip_when_disabled(assigns)
-
     ~H"""
-    <span {@span_attrs}>
+    <.tooltip_when_disabled
+      id={@rest[:id]}
+      tooltip={@tooltip}
+      disabled={@rest[:disabled]}
+    >
       <button
         type={@type}
         class={[
-          "inline-flex justify-center py-2 px-4 border border-transparent
-      shadow-sm text-sm font-medium rounded-md text-white focus:outline-none
-      focus:ring-2 focus:ring-offset-2 focus:ring-primary-500",
+          "inline-flex justify-center py-2 px-4 border border-transparent",
+          "shadow-sm text-sm font-medium rounded-md text-white focus:outline-none",
+          "focus:ring-2 focus:ring-offset-2 focus:ring-primary-500",
           "bg-primary-600 hover:bg-primary-700",
           "disabled:bg-primary-300",
           "phx-submit-loading:opacity-75 ",
@@ -43,21 +44,29 @@ defmodule LightningWeb.Components.NewInputs do
       >
         <%= render_slot(@inner_block) %>
       </button>
+    </.tooltip_when_disabled>
+    """
+  end
+
+  attr :id, :string, required: true
+  attr :disabled, :boolean, default: false
+  attr :tooltip, :string, default: nil
+
+  slot :inner_block, required: true
+
+  defp tooltip_when_disabled(%{disabled: true, tooltip: tooltip} = assigns)
+       when not is_nil(tooltip) do
+    ~H"""
+    <span id={"#{@id}-tooltip"} phx-hook="Tooltip" aria-label={@tooltip}>
+      <%= render_slot(@inner_block) %>
     </span>
     """
   end
 
   defp tooltip_when_disabled(assigns) do
-    with true <- Map.get(assigns.rest, :disabled, false),
-         tooltip when not is_nil(tooltip) <- Map.get(assigns, :tooltip) do
-      assign(assigns, :span_attrs, %{
-        "id" => assigns.id,
-        "phx-hook" => "Tooltip",
-        "aria-label" => tooltip
-      })
-    else
-      _ -> assign(assigns, :span_attrs, %{})
-    end
+    ~H"""
+    <%= render_slot(@inner_block) %>
+    """
   end
 
   @doc """

lib/lightning_web/live/components/modal.ex

@@ -32,6 +32,8 @@ defmodule LightningWeb.Components.Modal do
     <div
       id={@id}
       phx-mounted={@show && show_modal(@id)}
+      phx-on-close={hide_modal(@id)}
+      phx-hook="ModalHook"
       class={"#{@position} z-50 hidden"}
       {@rest}
     >
@@ -49,7 +51,7 @@ defmodule LightningWeb.Components.Modal do
         tabindex="0"
       >
         <div class="flex flex-col min-h-full items-center justify-center">
-          <div class={"#{@width} p-4 sm:p-6 lg:py-8"}>
+          <div class={@width}>
             <.focus_wrap
               id={"#{@id}-container"}
               phx-mounted={@show && show_modal(@on_open, @id)}