@messagevisor/catalog 0.3.0 → 0.4.0

package/src/components/lists/EntityList.tsx

@@ -10,14 +10,23 @@ import { EmptyState } from "../ui/EmptyState";
 import { Input } from "../ui/Input";
 import { Button } from "../ui/Button";
 import { EntityKey } from "../ui/EntityKey";
+import { SearchHighlight } from "../ui/SearchHighlight";
 import { CATALOG_LIST_INITIAL_LIMIT } from "../../config";
 import type { ParsedQuery } from "../../utils/searchQuery";
 import { parseQuery } from "../../utils/searchQuery";
 
+interface EntityListHighlightTerms {
+  key: string[];
+  description: string[];
+  relationship: string[];
+  lastModified: string[];
+}
+
 function matchesQuery(
   entity: EntitySummary,
   parsed: ParsedQuery,
   translationShard: TranslationShard | null,
+  translationSearchEnabled: boolean,
 ): boolean {
   const { freeText, qualifiers } = parsed;
 
@@ -70,6 +79,7 @@ function matchesQuery(
         break;
       }
       case "translation": {
+        if (!translationSearchEnabled) break;
         if (q.value.length < 3) return true; // require 3+ chars; don't filter otherwise
         if (!translationShard) return true; // optimistically include while loading
         const values = translationShard[entity.key];
@@ -91,13 +101,14 @@ function getQueryHints(
   type: EntityType,
   firstTargetKey: string | undefined,
   firstLocaleKey: string | undefined,
+  translationSearchEnabled: boolean,
 ): string[] | null {
   const target = firstTargetKey;
   const locale = firstLocaleKey;
 
   if (type === "message") {
     return [
-      'translation:"keyword"',
+      ...(translationSearchEnabled ? ['translation:"keyword"'] : []),
       ...(target ? [`target:${target}`] : []),
       ...(locale ? [`locale:${locale}`] : []),
       'description:"keyword"',
@@ -116,15 +127,17 @@ function QueryHints({
   query,
   firstTargetKey,
   firstLocaleKey,
+  translationSearchEnabled,
   onHintClick,
 }: {
   type: EntityType;
   query: string;
   firstTargetKey: string | undefined;
   firstLocaleKey: string | undefined;
+  translationSearchEnabled: boolean;
   onHintClick: (hint: string) => void;
 }) {
-  const hints = getQueryHints(type, firstTargetKey, firstLocaleKey);
+  const hints = getQueryHints(type, firstTargetKey, firstLocaleKey, translationSearchEnabled);
   if (!hints) return null;
 
   return (
@@ -164,7 +177,7 @@ function getStatusBadges(entity: EntitySummary) {
   );
 }
 
-function LastModified(props: { entity: EntitySummary }) {
+function LastModified(props: { entity: EntitySummary; highlightQuery: string[] }) {
   if (!props.entity.lastModified) {
     return <span>Last modified n/a</span>;
   }
@@ -180,8 +193,11 @@ function LastModified(props: { entity: EntitySummary }) {
 
   return (
     <span>
-      Last modified by <span className="font-semibold">{props.entity.lastModified.author}</span> on{" "}
-      {formattedDate}
+      Last modified by{" "}
+      <span className="font-semibold">
+        <SearchHighlight text={props.entity.lastModified.author} query={props.highlightQuery} />
+      </span>{" "}
+      on <SearchHighlight text={formattedDate} query={props.highlightQuery} />
     </span>
   );
 }
@@ -194,6 +210,32 @@ function getRelationshipBadges(type: EntityType, entity: EntitySummary) {
   return entity.targets || [];
 }
 
+function uniqueTerms(terms: string[]) {
+  return Array.from(new Set(terms.map((term) => term.trim()).filter(Boolean)));
+}
+
+export function getEntityListHighlightTerms(query: string): EntityListHighlightTerms {
+  const parsed = parseQuery(query);
+  const freeText = uniqueTerms(parsed.freeText);
+  const description = uniqueTerms(
+    parsed.qualifiers
+      .filter((qualifier) => qualifier.key === "description")
+      .map((qualifier) => qualifier.value),
+  );
+  const relationship = uniqueTerms(
+    parsed.qualifiers
+      .filter((qualifier) => qualifier.key === "target" || qualifier.key === "locale")
+      .map((qualifier) => qualifier.value),
+  );
+
+  return {
+    key: freeText,
+    description,
+    relationship,
+    lastModified: freeText,
+  };
+}
+
 function getSortDirection(sortValue: string | null) {
   if (!sortValue || sortValue === "name" || sortValue === "name:asc" || sortValue === "asc") {
     return "asc";
@@ -225,6 +267,7 @@ export function EntityList(props: {
   entities: EntitySummary[];
   setKey?: string;
   allEntities?: Record<EntityType, EntitySummary[]>;
+  translationSearchEnabled?: boolean;
 }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const [showAll, setShowAll] = React.useState(false);
@@ -242,12 +285,14 @@ export function EntityList(props: {
 
   const firstTargetKey = props.allEntities?.target?.find((e) => !e.archived)?.key;
   const firstLocaleKey = props.allEntities?.locale?.find((e) => !e.archived)?.key;
-  const hasHintsDefined = getQueryHints(props.type, firstTargetKey, firstLocaleKey) !== null;
+  const translationSearchEnabled = props.translationSearchEnabled === true;
+  const hasHintsDefined =
+    getQueryHints(props.type, firstTargetKey, firstLocaleKey, translationSearchEnabled) !== null;
 
   // Compute the 3-char shard prefix needed for the current query
   const _translationQual = parseQuery(query).qualifiers.find((q) => q.key === "translation");
   const neededShardKey =
-    _translationQual && _translationQual.value.length >= 3
+    translationSearchEnabled && _translationQual && _translationQual.value.length >= 3
       ? _translationQual.value.slice(0, 3).toLowerCase()
       : null;
 
@@ -279,6 +324,7 @@ export function EntityList(props: {
 
   // Pass shard to matchesQuery only when the loaded shard matches what's needed
   const activeShard = loadedShardKey === neededShardKey ? translationShard : null;
+  const highlightTerms = React.useMemo(() => getEntityListHighlightTerms(query), [query]);
 
   const filtered = React.useMemo(() => {
     const parsed = parseQuery(query);
@@ -286,14 +332,14 @@ export function EntityList(props: {
 
     const matching = props.entities.filter((entity) => {
       if (!hasQuery) return true;
-      return matchesQuery(entity, parsed, activeShard);
+      return matchesQuery(entity, parsed, activeShard, translationSearchEnabled);
     });
 
     return matching.slice().sort((left, right) => {
       const result = left.key.localeCompare(left.key === right.key ? "" : right.key);
       return sortDirection === "desc" ? result * -1 : result;
     });
-  }, [query, props.entities, sortDirection, activeShard]);
+  }, [query, props.entities, sortDirection, activeShard, translationSearchEnabled]);
 
   const visible = showAll ? filtered : filtered.slice(0, CATALOG_LIST_INITIAL_LIMIT);
   const hasHiddenEntities = filtered.length > CATALOG_LIST_INITIAL_LIMIT && !showAll;
@@ -365,6 +411,7 @@ export function EntityList(props: {
                   query={query}
                   firstTargetKey={firstTargetKey}
                   firstLocaleKey={firstLocaleKey}
+                  translationSearchEnabled={translationSearchEnabled}
                   onHintClick={handleHintClick}
                 />
               </div>
@@ -410,9 +457,16 @@ export function EntityList(props: {
               <div className="min-w-0 flex-1">
                 <div className="flex flex-col justify-between gap-2 md:flex-row md:items-start">
                   <div className="min-w-0">
-                    <EntityKey value={entity.key} className="text-sm font-semibold text-primary" />
+                    <EntityKey
+                      value={entity.key}
+                      className="text-sm font-semibold text-primary"
+                      highlightQuery={highlightTerms.key}
+                    />
                     <div className="mt-1 truncate text-sm text-muted">
-                      {entity.description || "No description"}
+                      <SearchHighlight
+                        text={entity.description || "No description"}
+                        query={highlightTerms.description}
+                      />
                     </div>
                   </div>
                   <div className="shrink-0">{getStatusBadges(entity)}</div>
@@ -420,11 +474,13 @@ export function EntityList(props: {
                 <div className="mt-2 flex flex-col gap-2 text-xs text-muted md:flex-row md:items-center md:justify-between">
                   <div className="flex flex-wrap gap-2">
                     {getRelationshipBadges(props.type, entity).map((label) => (
-                      <Badge key={label}>{label}</Badge>
+                      <Badge key={label}>
+                        <SearchHighlight text={label} query={highlightTerms.relationship} />
+                      </Badge>
                     ))}
                   </div>
                   <span className="shrink-0 md:text-right">
-                    <LastModified entity={entity} />
+                    <LastModified entity={entity} highlightQuery={highlightTerms.lastModified} />
                   </span>
                 </div>
               </div>

package/src/components/ui/EntityKey.spec.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { EntityKey } from "./EntityKey";
+
+describe("EntityKey", function () {
+  it("highlights namespace queries that include dots", function () {
+    const html = renderToStaticMarkup(
+      React.createElement(EntityKey, {
+        value: "auth.xyz.login",
+        highlightQuery: ["auth.xyz"],
+      }),
+    );
+
+    expect(html).toContain("<mark");
+    expect(html).toContain("auth");
+    expect(html).toContain("xyz");
+    expect(html).toContain("<wbr");
+  });
+
+  it("highlights trailing namespace dots while preserving word-break hints", function () {
+    const html = renderToStaticMarkup(
+      React.createElement(EntityKey, {
+        value: "auth.signin.title",
+        highlightQuery: ["auth."],
+      }),
+    );
+
+    expect(html).toContain("<mark");
+    expect(html).toContain("auth");
+    expect(html).toContain("<wbr");
+  });
+});

package/src/components/ui/EntityKey.tsx

@@ -1,20 +1,99 @@
-export function EntityKey(props: { value: string; className?: string }) {
-  const parts = props.value.split(".");
+import * as React from "react";
+
+import { SearchHighlightMark } from "./SearchHighlight";
+
+interface HighlightRange {
+  start: number;
+  end: number;
+}
+
+function getHighlightRanges(value: string, queries: string[]): HighlightRange[] {
+  const lowerValue = value.toLowerCase();
+  const ranges: HighlightRange[] = [];
+
+  for (const rawQuery of queries) {
+    const query = rawQuery.trim().toLowerCase();
+    if (!query) continue;
+
+    let start = lowerValue.indexOf(query);
+    while (start !== -1) {
+      ranges.push({ start, end: start + query.length });
+      start = lowerValue.indexOf(query, start + query.length);
+    }
+  }
+
+  return ranges
+    .sort((left, right) => left.start - right.start || right.end - left.end)
+    .reduce<HighlightRange[]>((merged, range) => {
+      const previous = merged[merged.length - 1];
+      if (!previous || range.start > previous.end) {
+        merged.push({ ...range });
+      } else {
+        previous.end = Math.max(previous.end, range.end);
+      }
+      return merged;
+    }, []);
+}
+
+function renderKeyTextWithBreaks(text: string) {
+  return text.split(".").flatMap((part, index, parts) => {
+    const nodes: React.ReactNode[] = [part];
+    if (index < parts.length - 1) {
+      nodes.push(
+        <React.Fragment key={`dot-${index}`}>
+          .<wbr />
+        </React.Fragment>,
+      );
+    }
+    return nodes;
+  });
+}
+
+function renderHighlightedKey(value: string, queries: string[]) {
+  const ranges = getHighlightRanges(value, queries);
+  if (ranges.length === 0) {
+    return renderKeyTextWithBreaks(value);
+  }
+
+  const nodes: React.ReactNode[] = [];
+  let cursor = 0;
+
+  ranges.forEach((range, index) => {
+    if (range.start > cursor) {
+      nodes.push(
+        <React.Fragment key={`text-${cursor}`}>
+          {renderKeyTextWithBreaks(value.slice(cursor, range.start))}
+        </React.Fragment>,
+      );
+    }
+
+    nodes.push(
+      <SearchHighlightMark key={`highlight-${range.start}-${index}`}>
+        {renderKeyTextWithBreaks(value.slice(range.start, range.end))}
+      </SearchHighlightMark>,
+    );
+    cursor = range.end;
+  });
+
+  if (cursor < value.length) {
+    nodes.push(
+      <React.Fragment key={`text-${cursor}`}>
+        {renderKeyTextWithBreaks(value.slice(cursor))}
+      </React.Fragment>,
+    );
+  }
+
+  return nodes;
+}
+
+export function EntityKey(props: { value: string; className?: string; highlightQuery?: string[] }) {
+  const highlightQuery = props.highlightQuery || [];
 
   return (
     <span
       className={["inline leading-snug [overflow-wrap:anywhere]", props.className || ""].join(" ")}
     >
-      {parts.map((part, index) => (
-        <span key={`${part}-${index}`}>
-          {part}
-          {index < parts.length - 1 ? (
-            <>
-              .<wbr />
-            </>
-          ) : null}
-        </span>
-      ))}
+      {renderHighlightedKey(props.value, highlightQuery)}
     </span>
   );
 }

package/src/components/ui/SearchHighlight.spec.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { SearchHighlight } from "./SearchHighlight";
+
+describe("SearchHighlight", function () {
+  it("highlights case-insensitive text matches with the shared mark styling", function () {
+    const html = renderToStaticMarkup(
+      React.createElement(SearchHighlight, { text: "Welcome back", query: "welcome" }),
+    );
+
+    expect(html).toContain("<mark");
+    expect(html).toContain("bg-amber-100");
+    expect(html).toContain(">Welcome</mark>");
+  });
+
+  it("escapes query text before matching", function () {
+    const html = renderToStaticMarkup(
+      React.createElement(SearchHighlight, { text: "Use plan.* literally", query: "plan.*" }),
+    );
+
+    expect(html).toContain(">plan.*</mark>");
+  });
+});

package/src/components/ui/SearchHighlight.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function normalizeQueries(query: string | string[]) {
+  const queries = Array.isArray(query) ? query : [query];
+
+  return Array.from(
+    new Set(queries.map((item) => item.trim()).filter((item) => item.length > 0)),
+  ).sort((left, right) => right.length - left.length);
+}
+
+export function SearchHighlight(props: { text: string; query: string | string[] }) {
+  const queries = normalizeQueries(props.query);
+  if (queries.length === 0) {
+    return <>{props.text}</>;
+  }
+
+  const regex = new RegExp(queries.map(escapeRegExp).join("|"), "gi");
+  const parts: React.ReactNode[] = [];
+  let lastIndex = 0;
+  let key = 0;
+
+  for (const match of props.text.matchAll(regex)) {
+    if (match.index !== undefined && match.index > lastIndex) {
+      parts.push(props.text.slice(lastIndex, match.index));
+    }
+
+    if (match.index !== undefined) {
+      parts.push(
+        <SearchHighlightMark key={`hm-${match.index}-${key++}`}>{match[0]}</SearchHighlightMark>,
+      );
+      lastIndex = match.index + match[0].length;
+    }
+  }
+
+  if (lastIndex < props.text.length) {
+    parts.push(props.text.slice(lastIndex));
+  }
+
+  return <>{parts}</>;
+}
+
+export function SearchHighlightMark(props: { children: React.ReactNode }) {
+  return (
+    <mark
+      className={[
+        "rounded-[3px] bg-amber-100 px-0.5 py-px text-inherit",
+        "shadow-[inset_0_-2px_0_0_rgba(251,191,36,0.35)] ring-1 ring-amber-400/25 ring-inset",
+        "transition-[background-color,box-shadow] duration-150",
+      ].join(" ")}
+    >
+      {props.children}
+    </mark>
+  );
+}

package/src/node/index.spec.ts

@@ -37,6 +37,15 @@ async function readJson<T>(root: string, relativePath: string): Promise<T> {
   return JSON.parse(await fs.promises.readFile(path.join(root, relativePath), "utf8"));
 }
 
+async function pathExists(root: string, relativePath: string) {
+  try {
+    await fs.promises.access(path.join(root, relativePath));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 async function createProject() {
   const root = await fs.promises.mkdtemp(path.join(os.tmpdir(), "messagevisor-catalog-"));
   const interpolationModulePath = path.join(
@@ -242,7 +251,11 @@ describe("catalog", function () {
     expect(manifest.sets).toBe(false);
     expect(manifest.router).toBe("browser");
     expect(manifest.dev).toBeUndefined();
+    expect(manifest.features).toEqual({ translationSearch: false });
     expect(manifest.paths.root).toBe("data/root/index.json");
+    await expect(pathExists(root, "catalog-out/data/root/translations/77656c.json")).resolves.toBe(
+      false,
+    );
     expect(index.counts.message).toBe(2);
     expect(
       index.entities.message.find((entry: any) => entry.key === "common.welcome").targets,
@@ -391,6 +404,26 @@ describe("catalog", function () {
     expect(history.entries).toEqual([]);
   });
 
+  it("exports translation search shards only when opted in", async function () {
+    const root = await createProject();
+    roots.push(root);
+    const projectConfig = getProjectConfig(root);
+    const datasource = new Datasource(projectConfig, root);
+
+    await catalogApi.exportCatalog(root, projectConfig, datasource, {
+      outDir: "catalog-out",
+      copyAssets: false,
+      withTranslationSearch: true,
+    });
+
+    const manifest = await readJson<any>(root, "catalog-out/data/manifest.json");
+    const shard = await readJson<any>(root, "catalog-out/data/root/translations/77656c.json");
+
+    expect(manifest.features).toEqual({ translationSearch: true });
+    expect(shard["common.welcome"]).toEqual(expect.arrayContaining(["welcome", "welcome pro"]));
+    expect(shard["common.draft"]).toEqual(["welcome"]);
+  });
+
   it("streams Git history into project, entity, and last-modified catalog data", async function () {
     const root = await createProject();
     roots.push(root);
@@ -668,7 +701,11 @@ describe("catalog", function () {
     const admin = await readJson<any>(root, "catalog-out/data/sets/admin/index.json");
 
     expect(manifest.sets).toBe(true);
+    expect(manifest.features).toEqual({ translationSearch: false });
     expect(manifest.setKeys).toEqual(["admin", "storefront"]);
+    await expect(
+      pathExists(root, "catalog-out/data/sets/storefront/translations/73746f.json"),
+    ).resolves.toBe(false);
     const storefrontDuplicates = await readJson<any>(
       root,
       "catalog-out/data/sets/storefront/duplicates/locales/en.json",
@@ -708,6 +745,45 @@ describe("catalog", function () {
     });
   });
 
+  it("exports set translation search shards when opted in", async function () {
+    const root = await fs.promises.mkdtemp(path.join(os.tmpdir(), "messagevisor-catalog-"));
+    roots.push(root);
+
+    await writeFile(root, "messagevisor.config.js", "module.exports = { sets: true };\n");
+
+    for (const set of ["storefront", "admin"]) {
+      await writeFile(root, `sets/${set}/locales/en.yml`, "description: English\n");
+      await writeFile(
+        root,
+        `sets/${set}/messages/common/welcome.yml`,
+        `description: Welcome\ntranslations:\n  en: ${set}\n`,
+      );
+    }
+
+    const projectConfig = getProjectConfig(root);
+    const datasource = new Datasource(projectConfig, root);
+
+    await catalogApi.exportCatalog(root, projectConfig, datasource, {
+      outDir: "catalog-out",
+      copyAssets: false,
+      withTranslationSearch: true,
+    });
+
+    const manifest = await readJson<any>(root, "catalog-out/data/manifest.json");
+    const storefrontShard = await readJson<any>(
+      root,
+      "catalog-out/data/sets/storefront/translations/73746f.json",
+    );
+    const adminShard = await readJson<any>(
+      root,
+      "catalog-out/data/sets/admin/translations/61646d.json",
+    );
+
+    expect(manifest.features).toEqual({ translationSearch: true });
+    expect(storefrontShard).toEqual({ "common.welcome": ["storefront"] });
+    expect(adminShard).toEqual({ "common.welcome": ["admin"] });
+  });
+
   it("groups streamed Git history by set", async function () {
     const root = await fs.promises.mkdtemp(path.join(os.tmpdir(), "messagevisor-catalog-"));
     roots.push(root);
@@ -900,10 +976,46 @@ describe("catalog plugin", function () {
     );
   });
 
+  it("forwards translation search option for dev catalog mode", async function () {
+    const { handler } = createPlugin();
+
+    await handler({ _: ["catalog"], withTranslationSearch: true });
+
+    expect(exportMock).toHaveBeenLastCalledWith(
+      expect.any(String),
+      expect.any(Object),
+      expect.any(Object),
+      expect.objectContaining({ withTranslationSearch: true, dev: true }),
+    );
+  });
+
+  it("forwards translation search option for export subcommand", async function () {
+    const { handler } = createPlugin();
+
+    await handler({
+      _: ["catalog", "export"],
+      subcommand: "export",
+      "with-translation-search": true,
+    });
+
+    expect(exportMock).toHaveBeenLastCalledWith(
+      expect.any(String),
+      expect.any(Object),
+      expect.any(Object),
+      expect.objectContaining({ withTranslationSearch: true }),
+    );
+  });
+
   it("forwards long and short port options for serve subcommand", async function () {
     const { handler } = createPlugin();
 
     await handler({ _: ["catalog", "serve"], subcommand: "serve", port: 3103 });
+    expect(serveMock).toHaveBeenLastCalledWith(
+      expect.any(String),
+      expect.any(Object),
+      expect.any(Object),
+      expect.not.objectContaining({ withTranslationSearch: true }),
+    );
     expect(serveMock).toHaveBeenLastCalledWith(
       expect.any(String),
       expect.any(Object),