@dfsramos/foreman 0.0.0-stage → 0.3.0

package/public/imports.js

@@ -0,0 +1,481 @@
+// The Import tab: saved read-only connections to trackers (Linear), a filtered list of what they
+// hold, and a button that copies the ticked tasks into the tracker a project takes its work from
+// (a Kaneo project or a git branch). Nothing is ever written to the tracker the tasks come from.
+// All text from the tracker is inserted as text nodes.
+
+import { api, banner, button, externalLink, fill, fmtDateTime, h } from './ui.js';
+
+const PRIORITY_NAMES = ['No priority', 'Urgent', 'High', 'Medium', 'Low'];
+/** States ticked by default when a team is chosen: work that has not started. */
+const DEFAULT_STATES = /^(backlog|todo|to do|triage|unstarted)$/i;
+
+const view = {
+  data: null, // the `/api/imports` response
+  loading: false,
+  form: null, // a connection being added or edited
+  connectionId: null,
+  targetProjectId: null,
+  options: null, // what the connection can see: teamId, projectId, states
+  lookup: { busy: false, message: null },
+  filter: { teamId: '', projectId: '', states: [] },
+  list: { busy: false, error: null, tasks: null },
+  selected: new Set(),
+  expanded: new Set(),
+  result: null,
+  importing: false,
+};
+
+/** Closes the form and forgets the loaded list; called when the user leaves the tab. */
+export function resetImports() {
+  view.form = null;
+  view.connectionId = null;
+  view.options = null;
+  view.list = { busy: false, error: null, tasks: null };
+  view.selected = new Set();
+  view.expanded = new Set();
+  view.result = null;
+  view.lookup = { busy: false, message: null };
+}
+
+const pending = (task) => task.imported === null;
+
+/** The trackers a project can take imports through, by source type. */
+const TRACKERS = { kaneo: 'Kaneo', git: 'Git branch' };
+
+export function importsTab(ctx) {
+  const targets = ctx.projects.filter((project) => project.sourceType in TRACKERS);
+
+  if (!view.data) {
+    if (!view.loading) {
+      view.loading = true;
+      void api('GET', '/api/imports').then((response) => {
+        view.loading = false;
+        if (response.ok) view.data = response.data;
+        else view.data = { connections: [], types: [], error: response.data?.error ?? `Could not load (${response.status})` };
+        ctx.rerender();
+      });
+    }
+    return h('div', { class: 'config' }, h('span', { class: 'muted' }, 'Loading…'));
+  }
+  const { data } = view;
+  const connection = data.connections.find((candidate) => candidate.id === view.connectionId) ?? null;
+  const target = targets.find((project) => project.id === view.targetProjectId) ?? null;
+  /** Where the chosen project keeps its tasks, or a neutral wording before one is chosen. */
+  const trackerName = target ? TRACKERS[target.sourceType] : 'the task tracker';
+
+  return h('div', { class: 'config' }, view.form ? formCard() : [intro(), connectionsCard(), data.connections.length > 0 ? importCard() : null]);
+
+  /* ---------- connections ---------- */
+
+  function intro() {
+    return banner(
+      'run',
+      null,
+      'Import tasks from another tracker into the place foreman picks work up from: a Kaneo project or a git branch. Foreman only reads from the other tracker: it never adds labels, comments or changes states there. An import is a one-time copy.',
+      null,
+      true,
+    );
+  }
+
+  function connectionsCard() {
+    return h(
+      'section',
+      { class: 'card' },
+      h('div', { class: 'card-head' }, h('h2', null, 'Connections'), h('span', { class: 'sub' }, 'Read-only logins'), h('span', { class: 'spacer' }), button('Add a connection', { onclick: () => openForm(null) })),
+      data.connections.length === 0
+        ? h('div', { class: 'list-empty' }, 'No connections yet. Add one to see what you can import.')
+        : data.connections.map((item) =>
+            h(
+              'div',
+              { class: 'import-conn' },
+              h('strong', null, item.name),
+              h('span', { class: 'muted' }, item.summary),
+              h('span', { class: 'spacer' }),
+              button('Edit', { onclick: () => openForm(item) }),
+              button('Delete', { variant: 'danger', onclick: () => remove(item) }),
+            ),
+          ),
+    );
+  }
+
+  function openForm(item) {
+    const type = data.types.find((candidate) => candidate.id === (item?.type ?? data.types[0]?.id));
+    view.form = {
+      id: item?.id ?? null,
+      title: item ? `Edit ${item.name}` : 'Add a connection',
+      type: type?.id ?? '',
+      name: item?.name ?? '',
+      // Secrets start empty: an empty secret on an existing connection means "keep the stored one".
+      settings: Object.fromEntries((type?.fields ?? []).map((field) => [field.key, field.type === 'secret' ? '' : (item?.settings[field.key] ?? '')])),
+      secretsSet: Object.fromEntries((type?.fields ?? []).filter((field) => field.type === 'secret').map((field) => [field.key, item?.settings[field.key]?.set === true])),
+      errors: {},
+      check: null,
+    };
+    ctx.rerender();
+  }
+
+  async function remove(item) {
+    if (!window.confirm(`Delete the connection "${item.name}"? Tasks already imported stay where they were copied to. Nothing is changed in the other tracker.`)) return;
+    const response = await api('DELETE', `/api/imports/${item.id}`);
+    if (!response.ok) return window.alert(response.data?.error ?? `Delete failed (${response.status})`);
+    view.data = response.data;
+    if (view.connectionId === item.id) resetImports();
+    ctx.rerender();
+  }
+
+  function formCard() {
+    const { form } = view;
+    const type = data.types.find((candidate) => candidate.id === form.type);
+    const payload = () => ({ ...(form.id === null ? {} : { id: form.id }), name: form.name, type: form.type, settings: form.settings });
+    const statusLine = h('div', { class: 'usage-line' });
+
+    const field = (label, key, id, control, help) => {
+      const error = form.errors[key];
+      return h(
+        'div',
+        { class: `field ${error ? 'error' : ''}` },
+        h('div', { class: 'label-row' }, h('label', { for: id }, label)),
+        control,
+        h('div', { class: 'help' }, error ? `⚠ ${error}` : (help ?? '')),
+      );
+    };
+    const input = (id, value, onInput, { secret = false, placeholder } = {}) => {
+      const control = h('input', { id, class: 'input', type: secret ? 'password' : 'text', autocomplete: secret ? 'new-password' : 'off', spellcheck: 'false', placeholder, value });
+      control.addEventListener('input', () => {
+        onInput(control.value);
+        form.check = null;
+        showStatus();
+      });
+      return control;
+    };
+
+    function showStatus() {
+      const messages = [];
+      if (form.check) messages.push(h('span', { class: form.check.ok ? 'text-ok' : 'text-fail' }, form.check.ok ? '✓ ' : '⚠ ', form.check.message));
+      if (form.errors._) messages.push(h('span', { class: 'text-fail' }, `⚠ ${form.errors._}`));
+      fill(statusLine, messages);
+      statusLine.hidden = messages.length === 0;
+    }
+
+    async function check(event) {
+      event.currentTarget.disabled = true;
+      form.check = null;
+      const response = await api('POST', '/api/imports/check', payload());
+      if (view.form !== form) return;
+      form.check = response.ok ? response.data : { ok: false, message: response.data?.error ?? `Check failed (${response.status})` };
+      ctx.rerender();
+    }
+
+    async function save() {
+      const response = form.id === null ? await api('POST', '/api/imports', payload()) : await api('PUT', `/api/imports/${form.id}`, payload());
+      if (view.form !== form) return;
+      if (response.ok) {
+        view.data = response.data;
+        view.form = null;
+      } else {
+        form.errors = response.data?.errors ?? { _: response.data?.error ?? `Save failed (${response.status})` };
+      }
+      ctx.rerender();
+    }
+
+    showStatus();
+    return [
+      h('h1', { class: 'title-l' }, form.title),
+      h(
+        'section',
+        { class: 'card' },
+        h('div', { class: 'card-head' }, h('h2', null, `Connection · ${type?.name ?? form.type}`), h('span', { class: 'sub' }, 'Used only to read')),
+        h(
+          'div',
+          { class: 'fields' },
+          field('Name', 'name', 'import-name', input('import-name', form.name, (value) => (form.name = value))),
+          (type?.fields ?? []).map((spec) =>
+            field(
+              spec.label,
+              `settings.${spec.key}`,
+              `import-${spec.key}`,
+              input(`import-${spec.key}`, form.settings[spec.key] ?? '', (value) => (form.settings[spec.key] = value), {
+                secret: spec.type === 'secret',
+                placeholder: spec.type === 'secret' && form.secretsSet[spec.key] ? '•••••••• (unchanged)' : undefined,
+              }),
+              spec.type === 'secret' && form.secretsSet[spec.key] ? `${spec.help ?? ''} A key is set; leave empty to keep it.`.trim() : spec.help,
+            ),
+          ),
+        ),
+        statusLine,
+      ),
+      h(
+        'div',
+        { class: 'save-bar' },
+        h('span', { class: 'note' }, 'The key is stored on this machine and never shown again.'),
+        h('span', { class: 'spacer' }),
+        button('Cancel', { onclick: () => ((view.form = null), ctx.rerender()) }),
+        button('Check', { onclick: check, title: 'Try the key against the tracker without saving' }),
+        button(form.id === null ? 'Add connection' : 'Save changes', { variant: 'primary', onclick: save }),
+      ),
+    ];
+  }
+
+  /* ---------- import ---------- */
+
+  function select(id, label, choices, current, onChange, help) {
+    const control = h(
+      'select',
+      { id, class: 'input' },
+      choices.map(([value, name]) => h('option', { value, selected: current === value }, name)),
+    );
+    control.addEventListener('change', () => onChange(control.value));
+    return h('div', { class: 'field' }, h('div', { class: 'label-row' }, h('label', { for: id }, label)), control, help ? h('div', { class: 'help' }, help) : null);
+  }
+
+  function forTeam(key) {
+    return (view.options?.[key] ?? []).filter((option) => !option.for || option.for.includes(view.filter.teamId));
+  }
+
+  async function loadOptions() {
+    const current = view.connectionId;
+    view.lookup = { busy: true, message: null };
+    ctx.rerender();
+    const type = view.data.connections.find((item) => item.id === current)?.type;
+    const response = await api('POST', '/api/imports/lookup', { id: current, type, settings: {} });
+    if (view.connectionId !== current) return;
+    if (response.ok && response.data.ok) {
+      view.options = response.data.options;
+      view.lookup = { busy: false, message: null };
+    } else {
+      view.options = null;
+      view.lookup = { busy: false, message: response.data?.message ?? response.data?.error ?? `Could not load (${response.status})` };
+    }
+    ctx.rerender();
+  }
+
+  function chooseTeam(teamId) {
+    view.filter = { teamId, projectId: '', states: [] };
+    view.filter.states = forTeam('states')
+      .filter((option) => DEFAULT_STATES.test(option.value))
+      .map((option) => option.value);
+    view.list = { busy: false, error: null, tasks: null };
+    view.selected = new Set();
+    view.result = null;
+    ctx.rerender();
+  }
+
+  async function loadTasks() {
+    view.list = { busy: true, error: null, tasks: null };
+    view.selected = new Set();
+    view.expanded = new Set();
+    ctx.rerender();
+    const current = view.connectionId;
+    const response = await api('POST', `/api/imports/${current}/tasks`, { filter: filterBody(), targetProjectId: view.targetProjectId });
+    if (view.connectionId !== current) return;
+    view.list = response.ok
+      ? { busy: false, error: null, tasks: response.data.tasks }
+      : { busy: false, error: response.data?.error ?? `Could not load (${response.status})`, tasks: null };
+    ctx.rerender();
+  }
+
+  function filterBody() {
+    return {
+      teamId: view.filter.teamId,
+      ...(view.filter.projectId ? { projectId: view.filter.projectId } : {}),
+      ...(view.filter.states.length > 0 ? { states: view.filter.states } : {}),
+    };
+  }
+
+  async function runImport() {
+    view.importing = true;
+    ctx.rerender();
+    const response = await api('POST', `/api/imports/${view.connectionId}/import`, {
+      filter: filterBody(),
+      targetProjectId: view.targetProjectId,
+      taskIds: [...view.selected],
+    });
+    view.importing = false;
+    view.result = response.ok ? response.data : { error: response.data?.error ?? `Import failed (${response.status})` };
+    await loadTasks();
+  }
+
+  function importCard() {
+    const ready = connection && target && view.filter.teamId;
+    return h(
+      'section',
+      { class: 'card' },
+      h('div', { class: 'card-head' }, h('h2', null, 'Import'), h('span', { class: 'sub' }, 'Choose what to copy into a project')),
+      h(
+        'div',
+        { class: 'fields' },
+        select(
+          'import-connection',
+          'Import from',
+          [['', 'Choose…'], ...data.connections.map((item) => [String(item.id), item.name])],
+          view.connectionId === null ? '' : String(view.connectionId),
+          (value) => {
+            resetImports();
+            view.connectionId = value === '' ? null : Number(value);
+            view.filter = { teamId: '', projectId: '', states: [] };
+            if (view.connectionId !== null) void loadOptions();
+            else ctx.rerender();
+          },
+        ),
+        select(
+          'import-target',
+          'Copy into',
+          [['', targets.length === 0 ? 'No project takes its work from Kaneo or a git branch yet' : 'Choose…'], ...targets.map((project) => [String(project.id), `${project.name} (${TRACKERS[project.sourceType]})`])],
+          view.targetProjectId === null ? '' : String(view.targetProjectId),
+          (value) => {
+            view.targetProjectId = value === '' ? null : Number(value);
+            view.list = { busy: false, error: null, tasks: null };
+            ctx.rerender();
+          },
+          'A foreman project that takes its work from Kaneo or a git branch. Imported tasks land where it picks work up: the Kaneo target column with its label, or a new todo file on the task branch.',
+        ),
+        view.options
+          ? [
+              select(
+                'import-team',
+                'Team',
+                [['', 'Choose…'], ...view.options.teamId.map((option) => [option.value, option.label])],
+                view.filter.teamId,
+                chooseTeam,
+              ),
+              select(
+                'import-project',
+                'Project',
+                [['', 'Any project'], ...forTeam('projectId').map((option) => [option.value, option.label])],
+                view.filter.projectId,
+                (value) => {
+                  view.filter.projectId = value;
+                  view.list = { busy: false, error: null, tasks: null };
+                  ctx.rerender();
+                },
+              ),
+              view.filter.teamId ? stateChecks() : null,
+            ]
+          : null,
+      ),
+      h(
+        'div',
+        { class: 'lookup-row' },
+        view.lookup.busy ? h('span', { class: 'muted' }, 'Loading…') : null,
+        view.lookup.message ? h('span', { class: 'text-fail' }, '⚠ ', view.lookup.message) : null,
+        button(view.list.busy ? 'Loading…' : 'Show tasks', { variant: 'primary', disabled: !ready || view.list.busy, onclick: () => void loadTasks() }),
+        !target && connection ? h('span', { class: 'faint' }, 'Choose the project to copy into.') : null,
+      ),
+      resultView(),
+      taskList(),
+    );
+  }
+
+  function stateChecks() {
+    const states = forTeam('states');
+    return h(
+      'div',
+      { class: 'field wide' },
+      h('div', { class: 'label-row' }, h('span', { class: 'label' }, 'States')),
+      h(
+        'div',
+        { class: 'checks' },
+        states.map((option) => {
+          const box = h('input', { type: 'checkbox', id: `import-state-${option.value}`, checked: view.filter.states.includes(option.value) });
+          box.addEventListener('change', () => {
+            view.filter.states = box.checked ? [...view.filter.states, option.value] : view.filter.states.filter((name) => name !== option.value);
+            view.list = { busy: false, error: null, tasks: null };
+            ctx.rerender();
+          });
+          return h('label', { class: 'switch', for: box.id }, box, option.label);
+        }),
+      ),
+      h('div', { class: 'help' }, 'None ticked lists every state.'),
+    );
+  }
+
+  function resultView() {
+    const result = view.result;
+    if (!result) return null;
+    if (result.error) return banner('fail', 'Import failed', result.error, null, true);
+    const parts = [];
+    if (result.imported.length > 0) parts.push(`${result.imported.length} imported: ${result.imported.map((item) => `${item.identifier} → ${item.targetIdentifier}`).join(', ')}`);
+    if (result.skipped.length > 0) parts.push(`${result.skipped.length} already in ${trackerName}`);
+    const tone = result.failed.length > 0 ? 'warn' : 'ok';
+    return [
+      banner(tone, result.failed.length > 0 ? 'Imported with problems' : 'Imported', parts.join(' · ') || 'Nothing to import.', null, true),
+      result.failed.length > 0 ? h('div', { class: 'import-failures' }, result.failed.map((item) => h('div', null, h('span', { class: 'mono' }, item.identifier ?? item.id), ' ', item.error))) : null,
+    ];
+  }
+
+  function taskList() {
+    const { busy, error, tasks } = view.list;
+    if (busy) return h('div', { class: 'list-empty' }, 'Loading tasks…');
+    if (error) return h('div', { class: 'list-empty text-fail' }, `⚠ ${error}`);
+    if (!tasks) return null;
+    if (tasks.length === 0) return h('div', { class: 'list-empty' }, 'No tasks match these filters.');
+
+    const open = tasks.filter(pending);
+    const allBox = h('input', { type: 'checkbox', 'aria-label': 'Select all', checked: open.length > 0 && open.every((task) => view.selected.has(task.id)), disabled: open.length === 0 });
+    allBox.addEventListener('change', () => {
+      view.selected = allBox.checked ? new Set(open.map((task) => task.id)) : new Set();
+      ctx.rerender();
+    });
+    const chosen = view.selected.size;
+    return [
+      h('div', { class: 'import-head' }, allBox, ...['Task', 'Title', 'Priority', 'Status', 'Labels'].map((label) => h('span', null, label))),
+      tasks.map(taskRows),
+      h(
+        'div',
+        { class: 'save-bar' },
+        h('span', { class: 'note' }, `${tasks.length} ${tasks.length === 1 ? 'task' : 'tasks'} · ${tasks.length - open.length} already imported · ${chosen} selected`),
+        h('span', { class: 'spacer' }),
+        button(view.importing ? 'Importing…' : `Import ${chosen} ${chosen === 1 ? 'task' : 'tasks'} into ${target?.name ?? 'a project'}`, {
+          variant: 'primary',
+          disabled: chosen === 0 || !target || view.importing,
+          onclick: () => void runImport(),
+        }),
+      ),
+    ];
+  }
+
+  function taskRows(task) {
+    const box = h('input', { type: 'checkbox', 'aria-label': `Select ${task.identifier}`, checked: view.selected.has(task.id), disabled: !pending(task) });
+    box.addEventListener('change', () => {
+      if (box.checked) view.selected.add(task.id);
+      else view.selected.delete(task.id);
+      ctx.rerender();
+    });
+    const isOpen = view.expanded.has(task.id);
+    const toggle = h(
+      'button',
+      {
+        class: 'import-title',
+        type: 'button',
+        'aria-expanded': String(isOpen),
+        onclick: () => {
+          if (isOpen) view.expanded.delete(task.id);
+          else view.expanded.add(task.id);
+          ctx.rerender();
+        },
+      },
+      h('span', { class: 'ellipsis' }, task.title),
+      task.imported ? h('span', { class: 'badge tone-ok' }, `In ${trackerName} · ${task.imported}`) : null,
+    );
+    return [
+      h(
+        'div',
+        { class: `import-row ${task.imported ? 'done' : ''}` },
+        box,
+        h('span', { class: 'mono' }, task.identifier),
+        toggle,
+        h('span', null, PRIORITY_NAMES[task.priority] ?? '—'),
+        h('span', null, task.status),
+        h('span', { class: 'ellipsis muted' }, task.labels.join(', ') || '—'),
+      ),
+      isOpen
+        ? h(
+            'div',
+            { class: 'import-detail' },
+            h('div', { class: 'import-meta' }, externalLink(task.url, `Open ${task.identifier}`), h('span', { class: 'faint' }, `Created ${fmtDateTime(task.createdAt)}`), h('span', { class: 'faint' }, task.assignee ? `Assigned to ${task.assignee}` : 'Unassigned')),
+            h('pre', { class: 'import-desc' }, task.description?.trim() || 'No description.'),
+          )
+        : null,
+    ];
+  }
+}

package/public/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Foreman</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header id="header" class="header"></header>
+    <div id="banner"></div>
+    <nav id="tabs" class="tabs" aria-label="Sections"></nav>
+    <main id="main" class="main"></main>
+    <dialog id="dialog" class="dialog"></dialog>
+    <noscript>Foreman's console needs JavaScript.</noscript>
+    <script type="module" src="app.js"></script>
+  </body>
+</html>