add credential type selection from workflow canvas

CHANGELOG.md

@@ -36,6 +36,9 @@ and this project adheres to
   [#3919](https://github.com/OpenFn/lightning/issues/3919)
 - Show server validation errors in the collab editor forms
   [#3783](https://github.com/OpenFn/lightning/issues/3783)
+- Add advanced credential type picker in collaborative workflow editor allowing
+  users to create OAuth, raw JSON, and keychain credentials directly from the
+  workflow canvas [#3906](https://github.com/OpenFn/lightning/issues/3906)
 - Enforce readonly state in collaborative editor forms for viewers and old
   snapshots [#3948](https://github.com/OpenFn/lightning/pull/3948)
 - Collab Editor: Add Workflow YAML code viewer panel

assets/js/collaborative-editor/components/ConfigureAdaptorModal.tsx

@@ -324,7 +324,7 @@ export function ConfigureAdaptorModal({
                 className="flex items-center justify-between px-6 py-4
                 border-b border-gray-200"
               >
-                <DialogTitle className="text-xl font-medium text-gray-900">
+                <DialogTitle className="text-lg font-bold leading-5 text-zinc-800">
                   Configure connection
                 </DialogTitle>
                 <button
@@ -731,10 +731,10 @@ export function ConfigureAdaptorModal({
                   type="button"
                   onClick={onClose}
                   aria-label="Close modal"
-                  className="px-6 py-2.5 bg-primary-600 text-white
-                  rounded-md font-medium hover:bg-primary-700
-                  focus:outline-none focus:ring-2 focus:ring-offset-2
-                  focus:ring-primary-500"
+                  className="rounded-md text-sm font-semibold shadow-xs px-3 py-2
+                  bg-primary-600 hover:bg-primary-500 text-white
+                  focus-visible:outline-2 focus-visible:outline-offset-2
+                  focus-visible:outline-primary-600"
                 >
                   Close
                 </button>

lib/lightning_web/live/components/credentials.ex

@@ -33,12 +33,13 @@ defmodule LightningWeb.Components.Credentials do
   attr :id, :string, required: true
   attr :width, :string, default: "max-w-md"
   attr :on_modal_close, Phoenix.LiveView.JS, default: @close_active_modal
+  attr :show, :boolean, default: true
   slot :inner_block, required: true
   slot :title, required: true
 
   def credential_modal(assigns) do
     ~H"""
-    <.modal id={@id} width={@width} on_close={@on_modal_close} show={true}>
+    <.modal id={@id} width={@width} on_close={@on_modal_close} show={@show}>
       <:title>
         <div class="flex justify-between">
           <span class="font-bold">
@@ -197,6 +198,120 @@ defmodule LightningWeb.Components.Credentials do
     end)
   end
 
+  attr :id, :string, required: true
+
+  attr :keychain_credential, Lightning.Credentials.KeychainCredential,
+    required: true
+
+  attr :keychain_changeset, Ecto.Changeset, required: true
+  attr :available_credentials, :list, required: true
+  attr :myself, :any, required: true
+  attr :action, :atom, default: :new
+  attr :from_collab_editor, :boolean, default: false
+  attr :on_modal_close, Phoenix.LiveView.JS, required: true
+  attr :show_modal, :boolean, default: true
+  attr :on_back, :any, default: nil
+  attr :on_validate, :string, default: "validate"
+  attr :on_submit, :string, default: "save"
+
+  def keychain_credential_form(assigns) do
+    ~H"""
+    <div class="text-xs text-left">
+      <.credential_modal
+        id={@id}
+        width="xl:min-w-1/3 min-w-1/2 max-w-full"
+        show={@show_modal}
+        on_modal_close={@on_modal_close}
+      >
+        <:title>
+          <%= if @action == :edit do %>
+            Edit {@keychain_credential.name || "keychain credential"}
+          <% else %>
+            Create keychain credential
+          <% end %>
+        </:title>
+
+        <.form
+          :let={f}
+          for={@keychain_changeset}
+          id={"keychain-credential-form-#{@keychain_credential.id || "new"}"}
+          phx-target={@myself}
+          phx-change={@on_validate}
+          phx-submit={@on_submit}
+        >
+          <div class="space-y-6 bg-white py-5">
+            <fieldset>
+              <div class="space-y-4">
+                <div>
+                  <.input
+                    type="text"
+                    field={f[:name]}
+                    label="Name"
+                    placeholder="Enter keychain credential name"
+                  />
+                  <p class="mt-1 text-sm text-gray-500">
+                    A descriptive name for this keychain credential
+                  </p>
+                </div>
+
+                <div>
+                  <.input
+                    type="text"
+                    field={f[:path]}
+                    label="JSONPath Expression"
+                    placeholder="$.user_id"
+                  />
+                  <p class="mt-1 text-sm text-gray-500">
+                    JSONPath expression to extract credential selector from run data
+                  </p>
+                </div>
+
+                <div>
+                  <.input
+                    type="select"
+                    field={f[:default_credential_id]}
+                    label="Default Credential"
+                    options={
+                      [{"No default credential", nil}] ++
+                        Enum.map(@available_credentials, &{&1.name, &1.id})
+                    }
+                  />
+                  <p class="mt-1 text-sm text-gray-500">
+                    Credential to use when JSONPath expression doesn't match
+                  </p>
+                </div>
+              </div>
+            </fieldset>
+          </div>
+
+          <.modal_footer>
+            <.button
+              id={"save-keychain-credential-button-#{@keychain_credential.id || "new"}"}
+              type="submit"
+              theme="primary"
+              disabled={!f.source.valid?}
+            >
+              <%= case @action do %>
+                <% :edit -> %>
+                  Save Changes
+                <% :new -> %>
+                  Create
+              <% end %>
+            </.button>
+            <%= if @from_collab_editor do %>
+              <.button type="button" phx-click={@on_back} theme="secondary">
+                Back
+              </.button>
+            <% else %>
+              <.cancel_button modal_id={@id} />
+            <% end %>
+          </.modal_footer>
+        </.form>
+      </.credential_modal>
+    </div>
+    """
+  end
+
   attr :users, :list, required: true
   attr :form, :map, required: true