Sandbox sync UI

CHANGELOG.md

@@ -75,6 +75,8 @@ and this project adheres to
   [#5202](https://github.com/OpenFn/lightning/pull/5202)
 - Index to improve the performance of the dataclip deletion query.
   [#5226](https://github.com/OpenFn/lightning/issues/5226)
+- The Repository and Branch dropdowns on the GitHub sync form now have a text
+  filter. [#5235](https://github.com/OpenFn/lightning/pull/5235)
 
 ### Changed
 
@@ -111,6 +113,12 @@ and this project adheres to
   donuts show the success rate and the failure count in their middle. Triage
   rows show each failure's state and adaptor, and the step bars show each step's
   adaptor. [#5229](https://github.com/OpenFn/lightning/pull/5229)
+- The project settings "Sync to GitHub" tab is now "Sync", and holds the project
+  export and a new CLI section with commands for pulling, deploying and running
+  a project locally. New GitHub connections default to the v2 `openfn.yaml`
+  format, with a switch to use the legacy format, and the connected panel now
+  carries its own title, verification banner and a "Remove integration" button.
+  [#5235](https://github.com/OpenFn/lightning/pull/5235)
 
 ### Removed
 

assets/js/hooks/SearchableSelect.ts

@@ -0,0 +1,59 @@
+import type { PhoenixHook } from './PhoenixHook';
+
+type SearchableSelect = PhoenixHook<{
+  search: HTMLInputElement | null;
+  applyFilter(): void;
+}>;
+
+/**
+ * Adds a text filter to the `custom-select` input (`searchable` attr).
+ *
+ * Options are filtered client-side by hiding non-matching `li[role=option]`
+ * elements. The filter is re-applied after every LiveView patch so a re-render
+ * of the options doesn't leave the list out of sync with the search box.
+ */
+const SearchableSelect = {
+  mounted() {
+    this.search = this.el.querySelector<HTMLInputElement>(
+      'input[data-select-search]'
+    );
+
+    if (!this.search) return;
+
+    this.search.addEventListener('input', () => this.applyFilter());
+
+    this.search.addEventListener('keydown', e => {
+      // Don't submit the surrounding form.
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        this.el
+          .querySelector<HTMLElement>('li[role=option]:not([hidden])')
+          ?.click();
+      }
+    });
+
+    // The wrapper's phx-click opens the list; focus the search box and start
+    // with a clean filter whenever the toggle button is clicked.
+    this.el.querySelector('button')?.addEventListener('click', () => {
+      requestAnimationFrame(() => {
+        if (!this.search) return;
+        this.search.value = '';
+        this.applyFilter();
+        this.search.focus();
+      });
+    });
+  },
+  updated() {
+    this.applyFilter();
+  },
+  applyFilter() {
+    const term = (this.search?.value ?? '').trim().toLowerCase();
+
+    this.el.querySelectorAll<HTMLElement>('li[role=option]').forEach(option => {
+      const label = (option.textContent ?? '').toLowerCase();
+      option.hidden = term !== '' && !label.includes(term);
+    });
+  },
+} as SearchableSelect;
+
+export { SearchableSelect };

assets/js/hooks/index.ts

@@ -25,6 +25,7 @@ import {
 } from './KeyHandlers';
 import LogLineHighlight from './LogLineHighlight';
 import type { PhoenixHook } from './PhoenixHook';
+import { SearchableSelect } from './SearchableSelect';
 import { TabbedContainer } from './TabbedContainer';
 
 export {
@@ -34,6 +35,7 @@ export {
   TemplateToWorkflow,
   ElapsedIndicator,
   TabbedContainer,
+  SearchableSelect,
   SaveViaCtrlS,
   InspectorSaveViaCtrlS,
   OpenSyncModalViaCtrlShiftS,

assets/test/hooks/SearchableSelect.test.ts

@@ -0,0 +1,125 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { SearchableSelect } from '#/hooks/SearchableSelect';
+
+const OPTIONS = ['Select a repository', 'openfn/lightning', 'openfn/kit'];
+
+function setup() {
+  document.body.innerHTML = `
+    <div id="repo-searchable">
+      <button type="button">toggle</button>
+      <ul role="listbox">
+        <li role="presentation"><input data-select-search type="text" /></li>
+        ${OPTIONS.map(o => `<li role="option">${o}</li>`).join('')}
+      </ul>
+    </div>
+  `;
+
+  const el = document.getElementById('repo-searchable') as HTMLElement;
+  const search = el.querySelector<HTMLInputElement>('input')!;
+  const hook = Object.assign(Object.create(SearchableSelect), { el });
+  hook.mounted();
+
+  const options = () =>
+    Array.from(el.querySelectorAll<HTMLElement>('li[role=option]'));
+  const visible = () =>
+    options()
+      .filter(o => !o.hidden)
+      .map(o => o.textContent);
+  const type = (value: string) => {
+    search.value = value;
+    search.dispatchEvent(new Event('input'));
+  };
+
+  return { el, search, hook, options, visible, type };
+}
+
+const nextFrame = () => new Promise(resolve => requestAnimationFrame(resolve));
+
+describe('SearchableSelect', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('shows every option before anything is typed', () => {
+    const { visible } = setup();
+
+    expect(visible()).toEqual(OPTIONS);
+  });
+
+  it('hides options that do not match, ignoring case', () => {
+    const { visible, type } = setup();
+
+    type('LIGHT');
+
+    expect(visible()).toEqual(['openfn/lightning']);
+  });
+
+  it('shows everything again when the filter is cleared', () => {
+    const { visible, type } = setup();
+
+    type('kit');
+    type('');
+
+    expect(visible()).toEqual(OPTIONS);
+  });
+
+  it('never hides the search row itself', () => {
+    const { el, type } = setup();
+
+    type('nothing matches this');
+
+    expect(el.querySelector<HTMLElement>('li[role=presentation]')!.hidden).toBe(
+      false
+    );
+  });
+
+  it('reapplies the filter after a LiveView patch', () => {
+    const { el, hook, visible, type } = setup();
+
+    type('kit');
+
+    // a patch re-renders the list with a new option and no hidden flags
+    const added = document.createElement('li');
+    added.setAttribute('role', 'option');
+    added.textContent = 'openfn/kitchen';
+    el.querySelector('ul')!.appendChild(added);
+    el.querySelectorAll<HTMLElement>('li[role=option]').forEach(
+      o => (o.hidden = false)
+    );
+
+    hook.updated();
+
+    expect(visible()).toEqual(['openfn/kit', 'openfn/kitchen']);
+  });
+
+  it('clicks the first visible option on Enter without submitting', () => {
+    const { search, options, type } = setup();
+    const clicked: (string | null)[] = [];
+    options().forEach(o =>
+      o.addEventListener('click', () => clicked.push(o.textContent))
+    );
+
+    type('kit');
+    const event = new KeyboardEvent('keydown', {
+      key: 'Enter',
+      cancelable: true,
+    });
+    search.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+    expect(clicked).toEqual(['openfn/kit']);
+  });
+
+  it('clears the filter and focuses the box when the list is opened', async () => {
+    const { el, search, visible, type } = setup();
+
+    type('kit');
+    el.querySelector('button')!.click();
+    await nextFrame();
+
+    expect(search.value).toBe('');
+    expect(visible()).toEqual(OPTIONS);
+    expect(document.activeElement).toBe(search);
+  });
+});

lib/lightning/version_control/project_repo_connection.ex

@@ -204,7 +204,9 @@ defmodule Lightning.VersionControl.ProjectRepoConnection do
     validate_change(changeset, :sync_direction, fn _field, value ->
       path = get_field(changeset, :config_path)
 
-      if value == :deploy and is_nil(path) do
+      # v2 syncs always use openfn.yaml, so only legacy ones need a path
+      if value == :deploy and is_nil(path) and
+           not get_field(changeset, :sync_version) do
         [config_path: "you must specify a path to an existing config file"]
       else
         []

lib/lightning_web/components/github_components.ex

@@ -4,11 +4,6 @@ defmodule LightningWeb.Components.GithubComponents do
   use LightningWeb, :component
 
   attr :id, :string, required: true
-
-  attr :class, :string,
-    default:
-      "text-center py-2 px-4 shadow-xs text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 bg-primary-600 hover:bg-primary-700 text-white"
-
   attr :user, Lightning.Accounts.User, required: true
   attr :github_query_params, :map
   attr :disabled, :boolean, default: false
@@ -18,15 +13,40 @@ defmodule LightningWeb.Components.GithubComponents do
       assign_new(assigns, :github_query_params, fn -> build_query_params() end)
 
     ~H"""
-    <.link
+    <.button_link
       id={@id}
+      theme="primary"
       href={"https://github.com/login/oauth/authorize?" <> Plug.Conn.Query.encode(@github_query_params)}
       target="_blank"
-      class={[@class, "#{if @disabled, do: "bg-primary-300 cursor-not-allowed"}"]}
-      {if @user.github_oauth_token, do: ["phx-hook": "Tooltip", "aria-label": "Your token has expired"], else: []}
+      disabled={@disabled}
+      phx-hook={@user.github_oauth_token && "Tooltip"}
+      aria-label={@user.github_oauth_token && "Your token has expired"}
     >
       {if @user.github_oauth_token, do: "Reconnect", else: "Connect"} your GitHub Account
-    </.link>
+    </.button_link>
+    """
+  end
+
+  attr :class, :string, default: "mb-4", doc: "spacing classes for the banner"
+
+  @doc """
+  Blue info banner pointing to the GitHub sync docs. Shown inside each state of
+  the Sync tab's GitHub panel.
+  """
+  def sync_docs_banner(assigns) do
+    ~H"""
+    <Common.alert id="github-sync-docs-banner" type="info" class={@class}>
+      <:message>
+        Learn more about synchronizing your project with GitHub at
+        <.link
+          target="_blank"
+          href="https://docs.openfn.org/documentation/link-to-GitHub"
+          class="font-medium underline"
+        >
+          docs.openfn.org
+        </.link>
+      </:message>
+    </Common.alert>
     """
   end
 

lib/lightning_web/components/new_inputs.ex

@@ -398,6 +398,10 @@ defmodule LightningWeb.Components.NewInputs do
 
   attr :button_placement, :string, default: nil
 
+  attr :searchable, :boolean,
+    default: false,
+    doc: "custom-select only: show a text box that filters the options"
+
   attr :placeholder, :string, default: ""
 
   attr :autocomplete, :string, default: "off"
@@ -524,7 +528,9 @@ defmodule LightningWeb.Components.NewInputs do
       </.label>
       <div class="flex w-full items-center">
         <div
+          id={@searchable && "#{@id}-searchable"}
           class="relative w-full"
+          phx-hook={@searchable && "SearchableSelect"}
           phx-click={JS.show(to: {:inner, "ul[role='listbox']"})}
         >
           <button
@@ -559,6 +565,22 @@ defmodule LightningWeb.Components.NewInputs do
             role="listbox"
             phx-click-away={JS.hide()}
           >
+            <li
+              :if={@searchable}
+              role="presentation"
+              class="sticky top-0 bg-white px-2 pt-1 pb-2"
+            >
+              <%!-- form="none" points at no real form, so typing here doesn't
+                    fire the surrounding form's phx-change --%>
+              <input
+                type="text"
+                form="none"
+                data-select-search
+                autocomplete="off"
+                placeholder="Filter…"
+                class="block w-full rounded-md border border-secondary-300 py-1 text-sm focus:border-primary-300 focus:ring focus:ring-primary-200/50"
+              />
+            </li>
             <li
               :for={option <- @options}
               class="relative cursor-default py-2 pr-4 pl-8 text-gray-900 select-none group hover:bg-primary-600 hover:text-white hover:outline-hidden"