Polish settings, profile, and credentials UX

CHANGELOG.md

@@ -17,6 +17,21 @@ and this project adheres to
 
 ### Added
 
+- Support collections in sandboxes. Collection names are now scoped per project,
+  empty collections are cloned into a sandbox on provision, and collection names
+  (not data) are synchronised when a sandbox is merged back into its parent.
+  Adds a v2 collections API at `/collections/:project_id/:name` selected via the
+  `x-api-version: 2` header. V1 continues to work and returns 409 when a name is
+  ambiguous across projects.
+  [#3548](https://github.com/OpenFn/lightning/issues/3548)
+- Sandbox-aware Project Settings page. Each tab shows a banner explaining how
+  changes will (or will not) flow on merge: Local (sandbox-only), Editable
+  (syncs on merge), or Inherited (read-only, managed in the parent). The Sandbox
+  Identity panel links back to the parent project, the MFA toggle is read-only,
+  webhook authentication methods are managed from the parent project, and parent
+  project admins cannot be removed from a sandbox.
+  [#3398](https://github.com/OpenFn/lightning/issues/3398)
+
 ### Changed
 
 - Bump `@openfn/ws-worker` from

assets/js/hooks/OtpInput.ts

@@ -0,0 +1,143 @@
+import type { PhoenixHook } from './PhoenixHook';
+
+type OtpInput = PhoenixHook<
+  {
+    boxes: HTMLInputElement[];
+    lastSubmitted: string;
+    _onInput(e: Event): void;
+    _onKeyDown(e: KeyboardEvent): void;
+    _onPaste(e: ClipboardEvent): void;
+    _onFocus(e: FocusEvent): void;
+    sync(): void;
+    clear(): void;
+  },
+  {
+    hiddenTarget?: string;
+    autofocus?: string;
+    validateEvent?: string;
+    submitEvent?: string;
+  }
+>;
+
+const OtpInput = {
+  mounted() {
+    this.boxes = Array.from(
+      this.el.querySelectorAll<HTMLInputElement>('input[data-otp-box]')
+    );
+    this.lastSubmitted = '';
+
+    this.handleEvent<{ id?: string }>('otp:clear', payload => {
+      if (payload.id && payload.id !== this.el.id) return;
+      this.clear();
+    });
+
+    this._onInput = (e: Event) => {
+      const input = e.target as HTMLInputElement;
+      const index = Number(input.dataset['index']);
+      const value = input.value.replace(/\D/g, '').slice(0, 1);
+      input.value = value;
+
+      if (value && index < this.boxes.length - 1) {
+        this.boxes[index + 1]?.focus();
+      }
+
+      this.sync();
+    };
+
+    this._onKeyDown = (e: KeyboardEvent) => {
+      const input = e.target as HTMLInputElement;
+      const index = Number(input.dataset['index']);
+
+      if (e.key === 'Backspace' && !input.value && index > 0) {
+        e.preventDefault();
+        const prev = this.boxes[index - 1];
+        if (prev) {
+          prev.focus();
+          prev.value = '';
+          this.sync();
+        }
+      } else if (e.key === 'ArrowLeft' && index > 0) {
+        e.preventDefault();
+        this.boxes[index - 1]?.focus();
+      } else if (e.key === 'ArrowRight' && index < this.boxes.length - 1) {
+        e.preventDefault();
+        this.boxes[index + 1]?.focus();
+      }
+    };
+
+    this._onPaste = (e: ClipboardEvent) => {
+      e.preventDefault();
+      const text = e.clipboardData?.getData('text') ?? '';
+      const digits = text.replace(/\D/g, '').slice(0, this.boxes.length);
+      if (digits.length === 0) return;
+
+      this.boxes.forEach((box, i) => {
+        box.value = digits[i] ?? '';
+      });
+
+      const lastFilled = Math.min(digits.length, this.boxes.length) - 1;
+      this.boxes[lastFilled]?.focus();
+      this.sync();
+    };
+
+    this._onFocus = (e: FocusEvent) => {
+      (e.target as HTMLInputElement).select();
+    };
+
+    this.boxes.forEach(box => {
+      box.addEventListener('input', this._onInput);
+      box.addEventListener('keydown', this._onKeyDown);
+      box.addEventListener('paste', this._onPaste);
+      box.addEventListener('focus', this._onFocus);
+    });
+
+    if (this.el.dataset.autofocus === 'true') {
+      this.boxes[0]?.focus();
+    }
+  },
+  sync() {
+    const code = this.boxes.map(b => b.value).join('');
+
+    const selector = this.el.dataset['hiddenTarget'];
+    if (selector) {
+      const hidden = document.querySelector<HTMLInputElement>(selector);
+      if (hidden) hidden.value = code;
+    }
+
+    const validateEvent = this.el.dataset['validateEvent'];
+    if (validateEvent) this.pushEventTo(this.el, validateEvent, { code });
+
+    const submitEvent = this.el.dataset['submitEvent'];
+    if (
+      submitEvent &&
+      code.length === this.boxes.length &&
+      code !== this.lastSubmitted
+    ) {
+      this.lastSubmitted = code;
+      this.pushEventTo(this.el, submitEvent, { code });
+    }
+  },
+  clear() {
+    this.boxes.forEach(b => {
+      b.value = '';
+    });
+    this.lastSubmitted = '';
+    this.boxes[0]?.focus();
+
+    const selector = this.el.dataset['hiddenTarget'];
+    if (selector) {
+      const hidden = document.querySelector<HTMLInputElement>(selector);
+      if (hidden) hidden.value = '';
+    }
+  },
+  destroyed() {
+    this.boxes.forEach(box => {
+      box.removeEventListener('input', this._onInput);
+      box.removeEventListener('keydown', this._onKeyDown);
+      box.removeEventListener('paste', this._onPaste);
+      box.removeEventListener('focus', this._onFocus);
+    });
+  },
+} as OtpInput;
+
+export { OtpInput };

assets/js/hooks/index.ts

@@ -25,6 +25,7 @@ import {
   OpenProjectPickerViaCtrlP,
 } from './KeyHandlers';
 import LogLineHighlight from './LogLineHighlight';
+import { OtpInput } from './OtpInput';
 import type { PhoenixHook } from './PhoenixHook';
 import {
   TabbedContainer,
@@ -53,6 +54,7 @@ export {
   OpenProjectPickerViaCtrlP,
   FileDropzone,
   CredentialSelector,
+  OtpInput,
 };
 
 export { ReactComponent, HeexReactComponent } from '#/react/hooks';

lib/lightning/collections.ex

@@ -53,9 +53,19 @@ defmodule Lightning.Collections do
   end
 
   @spec get_collection(String.t()) ::
-          {:ok, Collection.t()} | {:error, :not_found}
+          {:ok, Collection.t()} | {:error, :not_found} | {:error, :conflict}
   def get_collection(name) do
-    case Repo.get_by(Collection, name: name) do
+    case Repo.all(from c in Collection, where: c.name == ^name) do
+      [] -> {:error, :not_found}
+      [collection] -> {:ok, collection}
+      [_ | _] -> {:error, :conflict}
+    end
+  end
+
+  @spec get_collection(Ecto.UUID.t(), String.t()) ::
+          {:ok, Collection.t()} | {:error, :not_found}
+  def get_collection(project_id, name) do
+    case Repo.get_by(Collection, project_id: project_id, name: name) do
       nil -> {:error, :not_found}
       collection -> {:ok, collection}
     end

lib/lightning/collections/collection.ex

@@ -40,7 +40,8 @@ defmodule Lightning.Collections.Collection do
     |> validate_format(:name, ~r/^[a-z0-9]+([\-_.][a-z0-9]+)*$/,
       message: "Collection name must be URL safe"
     )
-    |> unique_constraint([:name],
+    |> unique_constraint(:name,
+      name: :collections_project_id_name_index,
       message: "A collection with this name already exists"
     )
   end
@@ -50,7 +51,8 @@ defmodule Lightning.Collections.Collection do
     |> validate_format(:name, ~r/^[a-z0-9]+([\-_.][a-z0-9]+)*$/,
       message: "Collection name must be URL safe"
     )
-    |> unique_constraint([:name],
+    |> unique_constraint(:name,
+      name: :collections_project_id_name_index,
       message: "A collection with this name already exists"
     )
   end

lib/lightning/projects.ex

@@ -319,7 +319,10 @@ defmodule Lightning.Projects do
       ** (Ecto.NoResultsError)
 
   """
-  def get_project_user!(id), do: Repo.get!(ProjectUser, id)
+  def get_project_user!(id, opts \\ []) do
+    include = Keyword.get(opts, :include, [])
+    ProjectUser |> Repo.get!(id) |> Repo.preload(include)
+  end
 
   @spec get_project_user(Ecto.UUID.t()) :: ProjectUser.t() | nil
   def get_project_user(id) when is_binary(id), do: Repo.get(ProjectUser, id)
@@ -574,6 +577,15 @@ defmodule Lightning.Projects do
       %{user_id: user_id, project_id: project_id} =
       Repo.preload(project_user, [:user, :project])
 
+    if Project.sandbox?(project_user.project) and
+         Lightning.Projects.Sandboxes.parent_admin?(
+           project_user.project,
+           project_user.user
+         ) do
+      raise ArgumentError,
+            "Cannot remove a parent project admin from a sandbox"
+    end
+
     Repo.transaction(fn ->
       from(pc in Lightning.Projects.ProjectCredential,
         join: c in Lightning.Credentials.Credential,