react-cheminfo 0.59.0 → 0.61.0

package/src/moleculesToken/ui/MoleculesTokenFix.tsx

@@ -0,0 +1,95 @@
+import { Callout } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+
+import { CodeBlock } from '../../clipboard/ui/CodeBlock.tsx';
+import { useLanguage } from '../../i18n/ui/useLanguage.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import { trimTrailingSlash } from '../../router/core/address.ts';
+import type { MoleculesTokenCheck } from '../core/moleculesToken.ts';
+import { issueTokenCommand, tokensToFix } from '../core/tokenFix.ts';
+
+/** Where molecules.cheminfo.org answers when the site names no other. */
+const DEFAULT_MOLECULES_URL = 'https://molecules.cheminfo.org';
+
+/** What {@link MoleculesTokenFix} shows. */
+export interface MoleculesTokenFixProps {
+  /** The last checks. */
+  checks: readonly MoleculesTokenCheck[];
+  /**
+   * Where molecules.cheminfo.org answers, whose Admin page issues tokens.
+   * @default 'https://molecules.cheminfo.org'
+   */
+  moleculesUrl?: string;
+}
+
+/**
+ * What to do about the tokens that have to be replaced — none set, refused, or
+ * issued for another source — in the three steps it takes: issue one on
+ * molecules.cheminfo.org, write it in the server's `.env`, restart. Nothing
+ * when every token is fine.
+ * @param props - See {@link MoleculesTokenFixProps}.
+ * @returns The steps, or null.
+ */
+export function MoleculesTokenFix(
+  props: MoleculesTokenFixProps,
+): ReactElement | null {
+  const { checks, moleculesUrl = DEFAULT_MOLECULES_URL } = props;
+  const t = useChromeT();
+  const language = useLanguage();
+  const toFix = tokensToFix(checks);
+  if (toFix.length === 0) return null;
+
+  const one = toFix.length === 1;
+  const variables = new Intl.ListFormat(language, {
+    type: 'conjunction',
+  }).format(toFix.map((check) => check.variable));
+  const admin = `${trimTrailingSlash(moleculesUrl)}/admin`;
+  const unsetOnly = toFix.every((check) => check.verdict === 'unset');
+
+  return (
+    <Callout
+      intent={unsetOnly ? 'warning' : 'danger'}
+      icon="key"
+      title={t('moleculesToken.fix.title', { variables })}
+      className="molecules-tokens__fix"
+      data-testid="molecules-tokens-fix"
+    >
+      <ol>
+        <li>
+          <p>
+            {t(
+              one
+                ? 'moleculesToken.fix.issueOne'
+                : 'moleculesToken.fix.issueMany',
+            )}{' '}
+            <a href={admin} target="_blank" rel="noreferrer">
+              {admin}
+            </a>
+          </p>
+          <p>{t('moleculesToken.fix.issueOnServer')}</p>
+          <CodeBlock
+            tone="muted"
+            copyable
+            code={[...new Set(toFix.map(issueTokenCommand))].join('\n')}
+          />
+        </li>
+        <li>
+          <p>
+            {t(
+              one ? 'moleculesToken.fix.envOne' : 'moleculesToken.fix.envMany',
+            )}
+          </p>
+          <CodeBlock
+            tone="muted"
+            copyable
+            code={toFix.map((check) => `${check.variable}=mct_…`).join('\n')}
+          />
+        </li>
+        <li>
+          <p>{t('moleculesToken.fix.restart')}</p>
+          <CodeBlock tone="muted" copyable code="docker compose up -d" />
+        </li>
+      </ol>
+    </Callout>
+  );
+}

package/src/moleculesToken/ui/MoleculesTokenTable.tsx

@@ -1,16 +1,18 @@
 import type { Intent } from '@blueprintjs/core';
 import { Button, Callout, HTMLTable, Tag } from '@blueprintjs/core';
-import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 
 import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
 import { useLanguage } from '../../i18n/ui/useLanguage.ts';
-import type { Translate } from '../../i18n/ui/useT.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
 import type {
   MoleculesTokenCheck,
   MoleculesTokenVerdict,
 } from '../core/moleculesToken.ts';
+import { tokensToFix } from '../core/tokenFix.ts';
+
+import { MoleculesTokenFix } from './MoleculesTokenFix.tsx';
+import { tokenDetails } from './tokenDetails.tsx';
 
 /** What {@link MoleculesTokenTable} shows. */
 export interface MoleculesTokenTableProps {
@@ -32,6 +34,11 @@ export interface MoleculesTokenTableProps {
    * @default undefined
    */
   error?: string;
+  /**
+   * Where molecules.cheminfo.org answers, whose Admin page issues tokens.
+   * @default 'https://molecules.cheminfo.org'
+   */
+  moleculesUrl?: string;
 }
 
 const INTENT: Record<MoleculesTokenVerdict, Intent> = {
@@ -60,12 +67,12 @@ const ISSUE_COMMAND = 'npm run tokens -- issue SOURCE EMAIL';
  * The tokens a site holds for molecules.cheminfo.org, one row each, with what
  * molecules.cheminfo.org said of it when it was last checked: valid, another
  * source's, refused, not set. A token is changed in the server's `.env`, never
- * here, so the table says where.
+ * here, so the table says where, and above it how, when one has to be.
  * @param props - See {@link MoleculesTokenTableProps}.
  * @returns The table.
  */
 export function MoleculesTokenTable(props: MoleculesTokenTableProps) {
-  const { checks, pending = false, onCheckAgain, error } = props;
+  const { checks, pending = false, onCheckAgain, error, moleculesUrl } = props;
   const t = useChromeT();
   const language = useLanguage();
   const formats = useMemo(
@@ -117,6 +124,9 @@ export function MoleculesTokenTable(props: MoleculesTokenTableProps) {
           {error}
         </Callout>
       )}
+      {checks !== null && (
+        <MoleculesTokenFix checks={checks} moleculesUrl={moleculesUrl} />
+      )}
       {checks === null ? (
         <p className="molecules-tokens__muted">
           {t('moleculesToken.notChecked')}
@@ -148,102 +158,18 @@ export function MoleculesTokenTable(props: MoleculesTokenTableProps) {
                       {t(LABEL[check.verdict])}
                     </Tag>
                   </td>
-                  <td>{details(check, t, formats.instant)}</td>
+                  <td>{tokenDetails(check, t, formats.instant)}</td>
                 </tr>
               ))}
             </tbody>
           </HTMLTable>
         </div>
       )}
-      <p className="molecules-tokens__muted">
-        {t('moleculesToken.howToChange')} <code>{ISSUE_COMMAND}</code>
-      </p>
+      {(checks === null || tokensToFix(checks).length === 0) && (
+        <p className="molecules-tokens__muted">
+          {t('moleculesToken.howToChange')} <code>{ISSUE_COMMAND}</code>
+        </p>
+      )}
     </section>
   );
 }
-
-/**
- * What a row says besides its verdict.
- * @param check - The check.
- * @param t - The chrome's translator.
- * @param instant - How an instant is written.
- * @returns The cell's content.
- */
-function details(
-  check: MoleculesTokenCheck,
-  t: Translate<ChromeKey>,
-  instant: Intl.DateTimeFormat,
-): ReactNode {
-  const hint: Fact | null =
-    check.hint === null
-      ? null
-      : ['hint', <code key="hint">{check.hint}…</code>];
-  switch (check.verdict) {
-    case 'ok':
-      return facts([
-        check.sources.length === 1 || check.source === null
-          ? null
-          : ['source', t('moleculesToken.forSource', { source: check.source })],
-        check.issuedAt === null
-          ? null
-          : [
-              'issued',
-              check.email === null
-                ? t('moleculesToken.issued', {
-                    when: instant.format(check.issuedAt),
-                  })
-                : t('moleculesToken.issuedTo', {
-                    email: check.email,
-                    when: instant.format(check.issuedAt),
-                  }),
-            ],
-        [
-          'used',
-          check.lastUsedAt === null
-            ? t('moleculesToken.neverUsed')
-            : t('moleculesToken.lastUsed', {
-                when: instant.format(check.lastUsedAt),
-              }),
-        ],
-        hint,
-      ]);
-    case 'otherSource':
-      return facts([
-        [
-          'source',
-          t('moleculesToken.otherSourceDetail', {
-            source: check.source ?? '',
-          }),
-        ],
-        hint,
-      ]);
-    case 'refused':
-      return check.message ?? t('moleculesToken.refusedDetail');
-    case 'unset':
-      return t('moleculesToken.unsetDetail', { variable: check.variable });
-    case 'uncheckable':
-      return t('moleculesToken.uncheckableDetail');
-    case 'unanswered':
-      return check.message;
-    default:
-      return null;
-  }
-}
-
-/** One fact about a token, and the key it is drawn under. */
-type Fact = readonly [key: string, content: ReactNode];
-
-/**
- * Facts about a token, one after the other.
- * @param parts - The facts; null ones are left out.
- * @returns The facts, separated by a middle dot.
- */
-function facts(parts: ReadonlyArray<Fact | null>): ReactNode {
-  const shown = parts.filter((part) => part !== null);
-  return shown.map(([key, content], index) => (
-    <span key={key}>
-      {index > 0 && ' · '}
-      {content}
-    </span>
-  ));
-}

package/src/moleculesToken/ui/index.ts

@@ -1,2 +1,4 @@
+export type { MoleculesTokenFixProps } from './MoleculesTokenFix.tsx';
+export { MoleculesTokenFix } from './MoleculesTokenFix.tsx';
 export type { MoleculesTokenTableProps } from './MoleculesTokenTable.tsx';
 export { MoleculesTokenTable } from './MoleculesTokenTable.tsx';

package/src/moleculesToken/ui/tokenDetails.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from 'react';
+
+import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
+import type { Translate } from '../../i18n/ui/useT.ts';
+import type { MoleculesTokenCheck } from '../core/moleculesToken.ts';
+
+/**
+ * What a row says besides its verdict.
+ * @param check - The check.
+ * @param t - The chrome's translator.
+ * @param instant - How an instant is written.
+ * @returns The cell's content.
+ */
+export function tokenDetails(
+  check: MoleculesTokenCheck,
+  t: Translate<ChromeKey>,
+  instant: Intl.DateTimeFormat,
+): ReactNode {
+  const hint: Fact | null =
+    check.hint === null
+      ? null
+      : ['hint', <code key="hint">{check.hint}…</code>];
+  switch (check.verdict) {
+    case 'ok':
+      return facts([
+        check.sources.length === 1 || check.source === null
+          ? null
+          : ['source', t('moleculesToken.forSource', { source: check.source })],
+        check.issuedAt === null
+          ? null
+          : [
+              'issued',
+              check.email === null
+                ? t('moleculesToken.issued', {
+                    when: instant.format(check.issuedAt),
+                  })
+                : t('moleculesToken.issuedTo', {
+                    email: check.email,
+                    when: instant.format(check.issuedAt),
+                  }),
+            ],
+        [
+          'used',
+          check.lastUsedAt === null
+            ? t('moleculesToken.neverUsed')
+            : t('moleculesToken.lastUsed', {
+                when: instant.format(check.lastUsedAt),
+              }),
+        ],
+        hint,
+      ]);
+    case 'otherSource':
+      return facts([
+        [
+          'source',
+          t('moleculesToken.otherSourceDetail', {
+            source: check.source ?? '',
+          }),
+        ],
+        hint,
+      ]);
+    case 'refused':
+      return check.message ?? t('moleculesToken.refusedDetail');
+    case 'unset':
+      return t('moleculesToken.unsetDetail', { variable: check.variable });
+    case 'uncheckable':
+      return t('moleculesToken.uncheckableDetail');
+    case 'unanswered':
+      return check.message;
+    default:
+      return null;
+  }
+}
+
+/** One fact about a token, and the key it is drawn under. */
+type Fact = readonly [key: string, content: ReactNode];
+
+/**
+ * Facts about a token, one after the other.
+ * @param parts - The facts; null ones are left out.
+ * @returns The facts, separated by a middle dot.
+ */
+function facts(parts: ReadonlyArray<Fact | null>): ReactNode {
+  const shown = parts.filter((part) => part !== null);
+  return shown.map(([key, content], index) => (
+    <span key={key}>
+      {index > 0 && ' · '}
+      {content}
+    </span>
+  ));
+}

package/src/server/siteFiles.ts

@@ -0,0 +1,64 @@
+import { existsSync } from 'node:fs';
+import { readdir } from 'node:fs/promises';
+import { join, relative, sep } from 'node:path';
+
+/**
+ * Every file of a built site, by its path from the root, written with `/`.
+ *
+ * The build does not change while the server runs, so the list is read once,
+ * and only a file on it is ever served: a path that climbs out of the root
+ * names nothing on the list.
+ * @param root - The directory the build wrote, e.g. `dist`.
+ * @returns The paths, e.g. `titration.html` and `assets/index-a1b2.js`, or
+ * `undefined` when the directory does not exist.
+ */
+export async function listSiteFiles(
+  root: string,
+): Promise<Set<string> | undefined> {
+  if (!existsSync(root)) return undefined;
+  const entries = await readdir(root, { recursive: true, withFileTypes: true });
+  const files = new Set<string>();
+  for (const entry of entries) {
+    if (!entry.isFile()) continue;
+    files.add(
+      relative(root, join(entry.parentPath, entry.name)).split(sep).join('/'),
+    );
+  }
+  return files;
+}
+
+/**
+ * The file that answers an address, as the static hosts of the family answer
+ * it: `/titration` is `titration.html` (never a redirect to `/titration/`),
+ * `/` and `/fr/` are their `index.html`, and any other file is itself.
+ * @param files - The files of the site, from {@link listSiteFiles}.
+ * @param pathname - The address, without its query, e.g. `/titration`.
+ * @returns The file, or `undefined` when the site has no such page.
+ */
+export function resolveAddress(
+  files: ReadonlySet<string>,
+  pathname: string,
+): string | undefined {
+  let path: string;
+  try {
+    path = decodeURIComponent(pathname);
+  } catch {
+    return undefined;
+  }
+  const local = path.replace(/^\/+/, '');
+  const candidates =
+    local === '' || local.endsWith('/')
+      ? [`${local}index.html`]
+      : [local, `${local}.html`, `${local}/index.html`];
+  return candidates.find((candidate) => files.has(candidate));
+}
+
+/**
+ * Whether a file is a bundle named by its content, which a browser may keep
+ * for a year: everything under an `assets` directory.
+ * @param file - The file, from the root.
+ * @returns True for a hashed bundle.
+ */
+export function isHashedBundle(file: string): boolean {
+  return file.startsWith('assets/') || file.includes('/assets/');
+}

package/src/server/staticSite.ts

@@ -0,0 +1,188 @@
+import { readFile } from 'node:fs/promises';
+import { join, relative, resolve, sep } from 'node:path';
+
+import type {
+  FastifyInstance,
+  FastifyReply,
+  FastifyRequest,
+  FastifySchema,
+} from 'fastify';
+
+import { injectTrackingScript } from '../seo/core/trackingScript.ts';
+
+import { isHashedBundle, listSiteFiles, resolveAddress } from './siteFiles.ts';
+
+/** Options of {@link staticSite}. */
+export interface StaticSiteOptions {
+  /** The directory the build wrote, e.g. `dist`. */
+  root: string;
+  /**
+   * The analytics snippet, put at the end of the head of every page, as
+   * `TRACKING_SCRIPT` holds it.
+   * @default undefined - no snippet
+   */
+  trackingScript?: string;
+  /**
+   * Addresses the site does not have any more, and the one that does their
+   * work. The query is carried over, so a link handed out before the move
+   * keeps its configuration.
+   * @default {}
+   */
+  redirects?: Readonly<Record<string, string>>;
+  /**
+   * Address prefixes another plugin answers, such as the API, which never
+   * answer a page: an unknown address there is the API's own 404.
+   * @default ['/v1/']
+   */
+  reserved?: readonly string[];
+}
+
+/** A page: the file with the snippet in its head, and the tag a browser checks. */
+interface Page {
+  html: string;
+  etag: string;
+}
+
+/** A page is checked on every visit: it names the bundles of its own build. */
+const PAGE_CACHE = 'no-cache';
+
+/** A bundle is named by its content, so it never changes under its name. */
+const BUNDLE_CACHE = 'public, max-age=31536000, immutable';
+
+/** Kept out of the API's documentation (`@fastify/swagger` reads `hide`). */
+const HIDDEN: FastifySchema & { hide: boolean } = { hide: true };
+
+/**
+ * Serve a site's build from Node, with the rules every static host of the
+ * family follows (static-web-server's `sws.toml`, Cloudflare Pages): a real
+ * file per address and no fallback page, `/titration` answered without a
+ * redirect, pages checked on every visit and hashed bundles kept for a year,
+ * the analytics snippet in every page, `404.html` for an address the site does
+ * not have, and `/health` for the deploy script.
+ *
+ * Register it next to the API; a build missing (a server started before the
+ * frontend was built) leaves the API alone:
+ *
+ *   await app.register(staticSite, { root: 'dist', trackingScript });
+ * @param fastify - The server.
+ * @param options - The build, the snippet and the retired addresses.
+ */
+export async function staticSite(
+  fastify: FastifyInstance,
+  options: StaticSiteOptions,
+): Promise<void> {
+  const { trackingScript, redirects = {}, reserved = ['/v1/'] } = options;
+  const root = resolve(options.root);
+
+  fastify.get(
+    '/health',
+    { logLevel: 'silent', schema: HIDDEN },
+    (_request, reply) => reply.send({ status: 'ok' }),
+  );
+
+  const files = await listSiteFiles(root);
+  if (files === undefined) {
+    fastify.log.warn({ root }, 'no built site: serving the API alone');
+    return;
+  }
+  const pages = await readPages(root, files, trackingScript);
+
+  // An optional peer, installed only by a site that has a server: importing
+  // react-cheminfo/server must not need it.
+  const { default: fastifyStatic } = await import('@fastify/static');
+  await fastify.register(fastifyStatic, {
+    root,
+    serve: false,
+    cacheControl: false,
+    setHeaders: (reply, path) => {
+      const file = relative(root, path).split(sep).join('/');
+      if (isHashedBundle(file)) {
+        reply.header('cache-control', BUNDLE_CACHE);
+        // A page framed by a sandboxed view may run under an opaque origin,
+        // and a module bundle is then fetched cross-origin.
+        reply.header('access-control-allow-origin', '*');
+      } else {
+        reply.header('cache-control', PAGE_CACHE);
+      }
+    },
+  });
+
+  const answer = (request: FastifyRequest, reply: FastifyReply) => {
+    const url = new URL(request.url, 'http://site');
+    const { pathname, search } = url;
+    if (reserved.some((prefix) => pathname.startsWith(prefix))) {
+      return reply.callNotFound();
+    }
+    const destination =
+      redirects[pathname] ?? redirects[pathname.replace(/\/$/, '')];
+    if (destination !== undefined) {
+      return reply.redirect(`${destination}${search}`, 301);
+    }
+
+    const file = resolveAddress(files, pathname);
+    if (file === undefined) {
+      return sendPage(request, reply, pages.get('404.html'), 404);
+    }
+    const page = pages.get(file);
+    if (page) return sendPage(request, reply, page, 200);
+    return reply.sendFile(file);
+  };
+
+  fastify.get('/', { schema: HIDDEN }, answer);
+  fastify.get('/*', { schema: HIDDEN }, answer);
+}
+
+/**
+ * Read every page of the build once, with the snippet in its head.
+ * @param root - The build.
+ * @param files - Its files.
+ * @param trackingScript - The snippet, if any.
+ * @returns The pages, by file.
+ */
+async function readPages(
+  root: string,
+  files: ReadonlySet<string>,
+  trackingScript: string | undefined,
+): Promise<Map<string, Page>> {
+  const htmlFiles = [...files].filter((file) => file.endsWith('.html'));
+  const pages = await Promise.all(
+    htmlFiles.map(async (file) => {
+      const html = injectTrackingScript(
+        await readFile(join(root, file), 'utf8'),
+        trackingScript,
+      );
+      return [file, { html, etag: await etagOf(html) }] as const;
+    }),
+  );
+  return new Map(pages);
+}
+
+function sendPage(
+  request: FastifyRequest,
+  reply: FastifyReply,
+  page: Page | undefined,
+  status: number,
+) {
+  if (page === undefined) {
+    return reply
+      .code(status)
+      .type('text/plain; charset=utf-8')
+      .send('Not found');
+  }
+  reply.header('cache-control', PAGE_CACHE).header('etag', page.etag);
+  if (status === 200 && request.headers['if-none-match'] === page.etag) {
+    return reply.code(304).send();
+  }
+  return reply.code(status).type('text/html; charset=utf-8').send(page.html);
+}
+
+async function etagOf(text: string): Promise<string> {
+  const digest = await crypto.subtle.digest(
+    'SHA-256',
+    new TextEncoder().encode(text),
+  );
+  const bytes = new Uint8Array(digest).subarray(0, 12);
+  let hex = '';
+  for (const byte of bytes) hex += byte.toString(16).padStart(2, '0');
+  return `"${hex}"`;
+}

package/src/server.ts

@@ -0,0 +1,7 @@
+export type { StaticSiteOptions } from './server/staticSite.ts';
+export { staticSite } from './server/staticSite.ts';
+export {
+  isHashedBundle,
+  listSiteFiles,
+  resolveAddress,
+} from './server/siteFiles.ts';

package/src/ui.ts

@@ -18,6 +18,7 @@ export * from './help/ui/index.ts';
 export * from './hooks/ui/index.ts';
 export * from './i18n/ui/index.ts';
 export * from './language/ui/index.ts';
+export * from './moleculesSources/ui/index.ts';
 export * from './moleculesToken/ui/index.ts';
 export * from './number/ui/index.ts';
 export * from './overlay/ui/index.ts';