@wular/coder 0.3.17 → 0.4.0

package/src/server/dash/app/dash/settings/[tab]/engines-list.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import './engines-list.css';
+
+import { useState } from 'preact/hooks';
+
+import { Badge } from '@/comps/ui/badge';
+import { MenuItem } from '@/comps/ui/menu';
+import { Select, type Option } from '@/comps/ui/select';
+import { ENGINES, ENGINE_NAMES, defaultLabel } from '@/app/dash/settings/model-options';
+import { useConfig, List, Row, EFFORTS, PERMISSIONS, AddRow } from './list';
+import type { ConfigShape, EngineEntry } from '@coder/client/types';
+
+/** Each engine's defaults, the order tasks try them, and the hosts tasks may reach. */
+export function EnginesList({
+  first,
+  defaults,
+}: {
+  first: ConfigShape;
+  defaults: Record<string, EngineEntry | undefined>;
+}) {
+  const [making, setMaking] = useState('');
+  const config = useConfig(first.config);
+  const chain = config.value.chain ?? first.effective.chain ?? ENGINES;
+  const hosts = config.value.approvals?.allowedNetworkHosts ?? [];
+  const rows = [
+    ...chain.filter(name => ENGINES.includes(name)),
+    ...ENGINES.filter(name => !chain.includes(name)),
+  ];
+  // What an unset select resolves to: the inherited value, else the built-in default.
+  const resolved = (name: string, key: 'effort' | 'permissions') =>
+    (first.config.engines?.[name]?.[key] ? undefined : first.effective.engines?.[name]?.[key]) ??
+    defaults[name]?.[key];
+  const pick = (name: string, key: 'effort' | 'permissions', options: string[]) => (
+    <label>
+      {key}
+      <Select
+        label={`${ENGINE_NAMES[name]} ${key}`}
+        value={config.value.engines?.[name]?.[key] ?? ''}
+        options={[
+          ['', defaultLabel(resolved(name, key) ?? (key === 'permissions' ? 'auto' : undefined))],
+          ...options.map((option): Option => [option, option]),
+        ]}
+        onChange={value => void config.patch({ engines: { [name]: { [key]: value || null } } })}
+      />
+    </label>
+  );
+  return (
+    <>
+      <List title="Engines" count={chain.length} error={config.error}>
+        {rows.map(name => (
+          <Row
+            key={name}
+            title={ENGINE_NAMES[name]!}
+            badges={
+              <>
+                {chain[0] === name ? <Badge tone="acc">default</Badge> : null}
+                {chain.includes(name) ? null : <Badge>off</Badge>}
+              </>
+            }
+            sub={
+              <span class="inline-picks">
+                {pick(name, 'effort', EFFORTS)}
+                {pick(name, 'permissions', PERMISSIONS)}
+              </span>
+            }
+            actions={
+              chain[0] === name ? null : (
+                <button
+                  type="button"
+                  class="btn secondary sm"
+                  disabled={making === name}
+                  aria-busy={making === name}
+                  onClick={() => {
+                    setMaking(name);
+                    void config
+                      .patch({ chain: [name, ...chain.filter(each => each !== name)] })
+                      .finally(() => setMaking(''));
+                  }}
+                >
+                  Make default
+                </button>
+              )
+            }
+            menu={
+              chain.includes(name) ? (
+                chain.length > 1 ? (
+                  <MenuItem
+                    title="Disable"
+                    onClick={() =>
+                      void config.patch({ chain: chain.filter(each => each !== name) })
+                    }
+                  />
+                ) : undefined
+              ) : (
+                <MenuItem
+                  title="Enable"
+                  onClick={() => void config.patch({ chain: [...chain, name] })}
+                />
+              )
+            }
+          />
+        ))}
+      </List>
+      <List
+        title="Allowed network hosts"
+        count={hosts.length}
+        error=""
+        add={
+          <AddRow
+            fields={[['host', 'Host, like registry.npmjs.org']]}
+            onAdd={({ host }) =>
+              config.patch({ approvals: { allowedNetworkHosts: [...new Set([...hosts, host!])] } })
+            }
+          />
+        }
+      >
+        {hosts.map(host => (
+          <Row
+            key={host}
+            title={host}
+            remove={{
+              title: `Remove ${host}?`,
+              body: 'Tasks lose access to it.',
+              onRemove: () =>
+                config.patch({
+                  approvals: { allowedNetworkHosts: hosts.filter(each => each !== host) },
+                }),
+            }}
+          />
+        ))}
+      </List>
+    </>
+  );
+}

package/src/server/dash/app/dash/settings/[tab]/list.css

@@ -0,0 +1,98 @@
+/* phones: a row's title and actions share the first line; badges, picks and details take the full width under them */
+@media (max-width: 760px) {
+  .settings tr {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px 12px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--line);
+  }
+  .settings tr:last-child {
+    border-bottom: 0;
+  }
+  .settings td {
+    padding: 0;
+    border: 0;
+  }
+  .settings td:first-child,
+  .settings .row-title {
+    display: contents;
+  }
+  .settings .row-title > :not(b),
+  .settings .sub {
+    grid-column: 1 / -1;
+    justify-self: start;
+  }
+  .settings td.acts {
+    grid-row: 1;
+    grid-column: 2;
+  }
+}
+
+/* settings lists */
+.add-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--line);
+}
+.acts dialog {
+  text-align: left;
+  white-space: normal;
+}
+.add-kind {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  font-size: 12.5px;
+}
+.add-grid + .add-grid {
+  margin-top: 12px;
+}
+/* room for the longest option, so a pick never shifts the row */
+/* Advanced and the button share a row; an open Advanced takes the row and the button drops under it */
+.add-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 12px;
+  margin-top: 12px;
+}
+.add-foot > .add-more {
+  flex: 1 1 auto;
+}
+.add-foot > .add-more[open] {
+  flex-basis: 100%;
+}
+.add-foot > .btn {
+  margin-left: auto;
+}
+.add-form .select:has([aria-label="Engine"]) {
+  min-width: 190px;
+}
+.add-form .select:has([aria-label="Provider"]) {
+  min-width: 200px;
+}
+.add-form .select:has([aria-label="Scope"]) {
+  min-width: 150px;
+}
+.add-more > summary {
+  width: max-content;
+  color: var(--muted);
+  font-size: 12.5px;
+  cursor: pointer;
+}
+.add-more > .add-grid {
+  margin-top: 12px;
+}
+/* a long name or URL wraps, so the row's actions stay on screen at phone width */
+.settings .row-title {
+  flex-wrap: wrap;
+  overflow-wrap: anywhere;
+}
+.settings .sub {
+  overflow-wrap: anywhere;
+}

package/src/server/dash/app/dash/settings/[tab]/list.tsx

@@ -0,0 +1,215 @@
+'use client';
+
+import './list.css';
+
+import type { ComponentChildren } from 'preact';
+import { useRef, useState } from 'preact/hooks';
+
+import { client } from '@/utils/client';
+import type { Config, ConfigPatch } from '@coder/client/types';
+
+import { iDots } from '@/comps/ui/icons';
+import { Card } from '@/comps/ui/card';
+import { reasonText } from '@/utils/format';
+import { ErrorText } from '@/comps/ui/field';
+import { Icon } from '@/comps/ui/icon';
+import { Menu, MenuItem } from '@/comps/ui/menu';
+import { ConfirmDialog } from '@/comps/ui/confirm';
+
+/** RFC 7396: objects merge, null deletes, anything else replaces. */
+function merged<T>(target: T, patch: unknown): T {
+  if (!patch || typeof patch !== 'object' || Array.isArray(patch)) return patch as T;
+  const out: Record<string, unknown> =
+    target && typeof target === 'object' && !Array.isArray(target) ? { ...target } : {};
+  for (const [key, value] of Object.entries(patch)) {
+    if (value === null) delete out[key];
+    else out[key] = merged(out[key], value);
+  }
+  return out as T;
+}
+
+/** Config edits shown at once and sent as merge patches; the newest answer wins and a failure rolls back. */
+export function useConfig(first: Config) {
+  const [value, setValue] = useState(first);
+  const [error, setError] = useState('');
+  const sent = useRef(0);
+  const saved = useRef(first);
+  const patch = (body: ConfigPatch) => {
+    const seq = ++sent.current;
+    setError('');
+    setValue(now => merged(now, body));
+    return client.config.patch(body).then(
+      answer => {
+        saved.current = answer;
+        if (seq === sent.current) setValue(answer);
+        return true;
+      },
+      reason => {
+        if (seq === sent.current) {
+          setValue(saved.current);
+          setError(reasonText(reason));
+        }
+        return false;
+      },
+    );
+  };
+  return { value, error, patch };
+}
+
+export const EFFORTS = ['low', 'medium', 'high'];
+
+export const PERMISSIONS = ['read-only', 'workspace-write', 'auto'];
+
+/** A change sent to the server; its answer replaces what the list shows. */
+export function useSend<T>(first: T) {
+  const [value, setValue] = useState(first);
+  const [error, setError] = useState('');
+  const send = async <R,>(act: () => Promise<R>, apply?: (answer: R) => T) => {
+    setError('');
+    try {
+      const answer = await act();
+      if (apply) setValue(apply(answer));
+      return true;
+    } catch (reason) {
+      setError(reasonText(reason));
+      return false;
+    }
+  };
+  return { value, setValue, error, setError, send };
+}
+
+/** The add row: its fields, and Enter in any of them adds. */
+export function AddRow({
+  fields,
+  onAdd,
+}: {
+  fields: Array<[name: string, placeholder: string]>;
+  onAdd: (values: Record<string, string>) => Promise<boolean>;
+}) {
+  return (
+    <form
+      class="add-row"
+      method="post"
+      onSubmit={async event => {
+        event.preventDefault();
+        const form = event.currentTarget;
+        const values = Object.fromEntries(
+          [...new FormData(form)].map(([key, value]) => [key, String(value).trim()]),
+        );
+        if (Object.values(values).some(value => !value)) return;
+        if (await onAdd(values)) form.reset();
+      }}
+    >
+      {fields.map(([name, placeholder]) => (
+        <input
+          key={name}
+          name={name}
+          placeholder={placeholder}
+          aria-label={placeholder}
+          autocomplete="off"
+        />
+      ))}
+      <button class="btn">Add</button>
+    </form>
+  );
+}
+
+export type Removal = {
+  title: string;
+  body?: string;
+  label?: string;
+  onRemove: () => Promise<unknown>;
+};
+
+/** A ghost-danger item for a row's ⋯ menu, and the shared dialog that asks before it removes; the dialog sits outside the menu. */
+export function useRemove(removal?: Removal) {
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  if (!removal) return {};
+  const { title, body, label = 'Remove', onRemove } = removal;
+  return {
+    item: <MenuItem title={label} danger onClick={() => setOpen(true)} />,
+    dialog: open ? (
+      <ConfirmDialog
+        open
+        title={title}
+        body={body}
+        confirmLabel={label}
+        busy={busy}
+        onClose={() => setOpen(false)}
+        onConfirm={() => {
+          setBusy(true);
+          void onRemove().finally(() => {
+            setBusy(false);
+            setOpen(false);
+          });
+        }}
+      />
+    ) : null,
+  };
+}
+
+/** A settings row: its primary action as a button, the rest and Remove in the ⋯ menu. */
+export function Row({
+  title,
+  badges,
+  sub,
+  actions,
+  menu,
+  remove,
+}: {
+  title: string;
+  badges?: ComponentChildren;
+  sub?: ComponentChildren;
+  actions?: ComponentChildren;
+  menu?: ComponentChildren;
+  remove?: Removal;
+}) {
+  const removing = useRemove(remove);
+  return (
+    <tr>
+      <td>
+        <span class="row-title">
+          <b>{title}</b>
+          {badges}
+        </span>
+        {sub ? <span class="sub mono">{sub}</span> : null}
+      </td>
+      <td class="acts">
+        {actions}
+        {menu || removing.item ? (
+          <Menu summaryClass="icon-btn" label="Actions" summary={<Icon d={iDots} />}>
+            {menu}
+            {removing.item}
+          </Menu>
+        ) : null}
+        {removing.dialog}
+      </td>
+    </tr>
+  );
+}
+
+export function List({
+  title,
+  count,
+  error,
+  children,
+  add,
+}: {
+  title: string;
+  count: number;
+  error: string;
+  children: ComponentChildren;
+  add?: ComponentChildren;
+}) {
+  return (
+    <Card title={title} count={count} actions={<ErrorText value={error} />}>
+      <div class="table-scroll">
+        <table class="rows settings">
+          <tbody>{children}</tbody>
+        </table>
+      </div>
+      {add}
+    </Card>
+  );
+}

package/src/server/dash/app/dash/settings/[tab]/loading.tsx

@@ -0,0 +1,6 @@
+import { Loading } from '@/comps/ui/card';
+
+/** Any settings tab before it arrives. */
+export default function LoadingSettings() {
+  return <Loading label="Loading settings" />;
+}

package/src/server/dash/app/dash/settings/[tab]/mcp-list.css

@@ -0,0 +1,43 @@
+.registry {
+  display: grid;
+  gap: 8px;
+  padding: 16px 16px 0;
+}
+/* one height for searching, results, none and errors, so the form under it stays put */
+.registry-results {
+  height: 170px;
+  border: 1px solid var(--line2);
+  background: var(--field);
+}
+.registry-results .pop-item b {
+  font-weight: 500;
+}
+.registry-results .badge {
+  margin-left: 6px;
+}
+.registry-note {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.registry-note.err {
+  color: var(--bad);
+}
+.skel {
+  padding: 8px 10px;
+  animation: loader-in 0s 150ms both;
+}
+.skel i {
+  display: block;
+  width: 35%;
+  height: 10px;
+  margin: 3px 0;
+  background: var(--wash2);
+}
+.skel i + i {
+  width: 70%;
+  background: var(--wash);
+}