@featurevisor/catalog 3.0.1 → 3.1.0

package/src/node/index.ts

@@ -242,8 +242,18 @@ class CatalogProgressReporter {
   }
 }
 
-function encodeKey(key: string) {
-  return encodeURIComponent(key);
+function encodeKeyPath(key: string) {
+  return key
+    .split("/")
+    .map((segment) => encodeURIComponent(segment))
+    .join(path.sep);
+}
+
+function encodeKeyUrlPath(key: string) {
+  return key
+    .split("/")
+    .map((segment) => encodeURIComponent(segment))
+    .join("/");
 }
 
 function toPosixPath(value: string) {
@@ -448,7 +458,7 @@ function getEntitySummary(
     promotable: entity.promotable,
     ...extra,
     lastModified: getLastModified(historyIndex, type, key, set),
-    href: `entities/${type}/${encodeKey(key)}.json`,
+    href: `entities/${type}/${encodeKeyUrlPath(key)}.json`,
   };
 }
 
@@ -1193,6 +1203,13 @@ async function buildSetCatalog(
       );
       const lastModified = getLastModified(context.historyIndex, plan.type, key, set);
       const entityRelationships = getEntityRelationships(plan.type, key, relationships);
+      const entityTests =
+        plan.type === "feature" || plan.type === "segment"
+          ? (entityRelationships.tests || []).map((testKey) => ({
+              ...maps.test[testKey],
+              key: maps.test[testKey].key || testKey,
+            }))
+          : undefined;
       const detail: EntityDetail = {
         type: plan.type,
         key,
@@ -1201,25 +1218,26 @@ async function buildSetCatalog(
         editLinks: getEditorLinks(context.devEditors, sourceFileInfo),
         lastModified,
         relationships: entityRelationships,
+        tests: entityTests?.length ? entityTests : undefined,
         environments: projectConfig.environments,
         historyPath: `${path.posix.join(
           "data",
           outputRelativeDirectory.split(path.sep).join(path.posix.sep),
           "entities",
           plan.type,
-          encodeKey(key),
+          encodeKeyUrlPath(key),
           "history",
         )}`,
       };
 
       await context.writer.write(
-        path.join(outputDirectoryPath, "entities", plan.type, `${encodeKey(key)}.json`),
+        path.join(outputDirectoryPath, "entities", plan.type, `${encodeKeyPath(key)}.json`),
         detail,
       );
 
       await writeHistoryPages(
         context.writer,
-        path.join(outputDirectoryPath, "entities", plan.type, encodeKey(key), "history"),
+        path.join(outputDirectoryPath, "entities", plan.type, encodeKeyPath(key), "history"),
         context.historyIndex.byEntity[getHistoryEntityKey(plan.type, key, set)] || [],
       );
 

package/src/pages/EntityDetailPage.tsx

@@ -35,6 +35,7 @@ import {
   type SchemaLike,
 } from "../components/variables";
 import { FeatureVariationsList } from "../components/variations";
+import { EntityTests } from "../components/tests";
 
 function isEntityPath(value: string | undefined): value is EntityPath {
   return (
@@ -78,6 +79,129 @@ function RulePermalink(props: { targetId: string }) {
   );
 }
 
+async function copyText(value: string) {
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(value);
+      return;
+    } catch {
+      // Fall through for browsers that expose the API but deny access in the current context.
+    }
+  }
+
+  const textarea = document.createElement("textarea");
+  textarea.value = value;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.select();
+
+  let copied = false;
+
+  try {
+    copied = document.execCommand("copy");
+  } finally {
+    document.body.removeChild(textarea);
+  }
+
+  if (!copied) {
+    throw new Error("Could not copy entity key");
+  }
+}
+
+function CopyEntityKeyButton(props: { entityKey: string }) {
+  const [status, setStatus] = React.useState<"idle" | "copied" | "error">("idle");
+  const resetTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  React.useEffect(() => {
+    return () => {
+      if (resetTimer.current) {
+        clearTimeout(resetTimer.current);
+      }
+    };
+  }, []);
+
+  async function handleCopy() {
+    if (resetTimer.current) {
+      clearTimeout(resetTimer.current);
+    }
+
+    try {
+      await copyText(props.entityKey);
+      setStatus("copied");
+    } catch {
+      setStatus("error");
+    }
+
+    resetTimer.current = setTimeout(() => {
+      setStatus("idle");
+      resetTimer.current = null;
+    }, 2000);
+  }
+
+  const label =
+    status === "copied"
+      ? `Copied ${props.entityKey}`
+      : status === "error"
+        ? `Could not copy ${props.entityKey}`
+        : `Copy ${props.entityKey}`;
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label={label}
+        title={label}
+        onClick={handleCopy}
+        className={[
+          "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-faint outline-none transition-all",
+          "opacity-100 md:opacity-0 md:group-hover:opacity-100",
+          "hover:border-border hover:bg-elevated hover:text-text",
+          "focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-primary",
+          status === "copied"
+            ? "border-green-200 bg-green-50 text-green-600 !opacity-100"
+            : status === "error"
+              ? "border-red-200 bg-red-50 text-red-600 !opacity-100"
+              : "border-border/70 bg-surface",
+        ].join(" ")}
+      >
+        {status === "copied" ? (
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 20 20"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.8"
+            className="h-4 w-4"
+          >
+            <path d="m4 10 3.5 3.5L16 5" />
+          </svg>
+        ) : (
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 20 20"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.6"
+            className="h-4 w-4"
+          >
+            <rect x="6.5" y="6.5" width="9" height="9" rx="1.5" />
+            <path d="M13.5 6.5V5A1.5 1.5 0 0 0 12 3.5H5A1.5 1.5 0 0 0 3.5 5v7A1.5 1.5 0 0 0 5 13.5h1.5" />
+          </svg>
+        )}
+      </button>
+      <span className="sr-only" aria-live="polite">
+        {status === "copied" ? "Entity key copied" : status === "error" ? "Copy failed" : ""}
+      </span>
+    </>
+  );
+}
+
 function useScrollToHash(dependencies: React.DependencyList) {
   React.useEffect(() => {
     if (typeof window === "undefined" || !window.location.hash) {
@@ -362,6 +486,7 @@ export function EntityDetailPage() {
           { to: "force", label: "Force" },
         ]
       : []),
+    ...(type === "feature" || type === "segment" ? [{ to: "tests", label: "Tests" }] : []),
     ...(type !== "test" ? [{ to: "usage", label: "Usage" }] : []),
     { to: "history", label: "History" },
   ];
@@ -370,6 +495,7 @@ export function EntityDetailPage() {
     <div>
       <PageHeader
         title={detail.key}
+        titleAction={<CopyEntityKeyButton entityKey={detail.key} />}
         description={entityLabels[type].singular}
         actions={<EditLink sourcePath={detail.sourcePath} editLinks={detail.editLinks} />}
       />
@@ -948,6 +1074,20 @@ export function UsageTab() {
   );
 }
 
+export function TestsTab() {
+  const { detail } = useEntityDetail();
+
+  if (detail.type !== "feature" && detail.type !== "segment") {
+    return <Navigate to=".." replace />;
+  }
+
+  if (!detail.tests?.length) {
+    return <EmptyState title="No test specs found" />;
+  }
+
+  return <EntityTests tests={detail.tests} />;
+}
+
 export function HistoryTab() {
   const { detail } = useEntityDetail();
   const { manifest } = useCatalog();

package/src/pages/ListPage.tsx

@@ -450,7 +450,7 @@ function VariationsIcon() {
   return (
     <span
       aria-hidden="true"
-      className="inline-flex h-4 min-w-4 items-center justify-center font-mono text-[9px] font-bold leading-none tracking-tight"
+      className="inline-flex items-center justify-center font-mono text-[9px] font-semibold leading-none tracking-tight"
     >
       a/b
     </span>
@@ -461,31 +461,19 @@ function VariablesIcon() {
   return (
     <span
       aria-hidden="true"
-      className="inline-flex h-4 min-w-4 items-center justify-center font-mono text-[9px] font-bold leading-none"
+      className="inline-flex items-center justify-center font-mono text-[9px] font-semibold leading-none"
     >
       {"{ }"}
     </span>
   );
 }
 
-function TargetIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
-      <path
-        fillRule="evenodd"
-        d="M10 2.75a7.25 7.25 0 1 0 0 14.5 7.25 7.25 0 0 0 0-14.5ZM4.25 10a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0ZM10 6.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5ZM7.75 10a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0Z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-}
-
 function sortValues(values?: string[]) {
   return Array.from(new Set(values || [])).sort((left, right) => left.localeCompare(right));
 }
 
-const rowMetadataIconClassName =
-  "rounded-full bg-slate-100 p-1 text-slate-400 hover:bg-slate-200 hover:text-slate-600";
+const rowMetadataItemClassName =
+  "h-full min-w-5 items-center justify-center px-1 text-faint transition-colors hover:bg-elevated hover:text-muted";
 
 function RowMetadataIcons(props: { entity: EntitySummary; type: CatalogEntityType }) {
   const targets = sortValues(props.entity.targets);
@@ -498,20 +486,26 @@ function RowMetadataIcons(props: { entity: EntitySummary; type: CatalogEntityTyp
   }
 
   return (
-    <div className="flex shrink-0 items-center gap-1">
+    <div className="flex h-5 shrink-0 divide-x divide-border/70 overflow-hidden rounded-md border border-border/70 bg-surface">
       {showVariations && (
-        <HoverTooltip label="Has variations" className={rowMetadataIconClassName}>
+        <HoverTooltip label="Has variations" className={rowMetadataItemClassName}>
           <VariationsIcon />
         </HoverTooltip>
       )}
       {showVariables && (
-        <HoverTooltip label="Has variables" className={rowMetadataIconClassName}>
+        <HoverTooltip label="Has variables" className={rowMetadataItemClassName}>
           <VariablesIcon />
         </HoverTooltip>
       )}
       {targets.length > 0 && (
-        <HoverTooltip label={`Targets: ${targets.join(", ")}`} className={rowMetadataIconClassName}>
-          <TargetIcon />
+        <HoverTooltip
+          label={`Targets: ${targets.join(", ")}`}
+          className={`${rowMetadataItemClassName} px-1.5`}
+        >
+          <span className="inline-flex items-baseline gap-1 text-[10px] leading-none">
+            <span>Targets</span>
+            <span className="font-semibold tabular-nums text-muted">{targets.length}</span>
+          </span>
         </HoverTooltip>
       )}
     </div>

package/src/testModel.ts

@@ -0,0 +1,123 @@
+import type {
+  AssertionMatrix,
+  FeatureAssertion,
+  SegmentAssertion,
+  Test,
+} from "@featurevisor/types";
+
+export interface ExpandedTestAssertion {
+  assertion: FeatureAssertion | SegmentAssertion;
+  assertionIndex: number;
+  caseIndex?: number;
+  caseCount?: number;
+  label: string;
+  matrixValues?: Record<string, unknown>;
+}
+
+function getMatrixCombinations(matrix: AssertionMatrix) {
+  const keys = Object.keys(matrix);
+
+  if (keys.length === 0) {
+    return [];
+  }
+
+  return keys.reduce<Array<Record<string, unknown>>>(
+    (combinations, key) =>
+      combinations.flatMap((combination) =>
+        matrix[key].map((value) => ({ ...combination, [key]: value })),
+      ),
+    [{}],
+  );
+}
+
+function applyCombinationToValue(value: unknown, combination: Record<string, unknown>) {
+  if (typeof value !== "string") {
+    return value;
+  }
+
+  const placeholders = value.match(/\${{(.+?)}}/g);
+  if (!placeholders) {
+    return value;
+  }
+
+  if (placeholders.length === 1 && value.startsWith("${{") && value.endsWith("}}")) {
+    const key = value.replace("${{", "").replace("}}", "").trim();
+    return combination[key];
+  }
+
+  return value.replace(/\${{(.+?)}}/g, (_, key) => String(combination[key.trim()]));
+}
+
+function applyCombinationToContext(
+  context: Record<string, unknown> | undefined,
+  combination: Record<string, unknown>,
+) {
+  return Object.fromEntries(
+    Object.entries(context || {}).map(([key, value]) => [
+      key,
+      applyCombinationToValue(value, combination),
+    ]),
+  );
+}
+
+function applyCombinationToAssertion(
+  test: Test,
+  assertion: FeatureAssertion | SegmentAssertion,
+  combination: Record<string, unknown>,
+) {
+  const result = {
+    ...assertion,
+    context: applyCombinationToContext(assertion.context, combination),
+  };
+  delete result.matrix;
+
+  if (result.description) {
+    result.description = String(applyCombinationToValue(result.description, combination));
+  }
+
+  if ("feature" in test) {
+    const featureResult = result as FeatureAssertion;
+    featureResult.environment = applyCombinationToValue(
+      featureResult.environment,
+      combination,
+    ) as FeatureAssertion["environment"];
+    featureResult.target = applyCombinationToValue(
+      featureResult.target,
+      combination,
+    ) as FeatureAssertion["target"];
+    const at = applyCombinationToValue(featureResult.at, combination);
+    featureResult.at = (
+      typeof at === "string" ? (at.includes(".") ? parseFloat(at) : parseInt(at, 10)) : at
+    ) as FeatureAssertion["at"];
+  }
+
+  return result;
+}
+
+export function expandTestAssertions(test: Test): ExpandedTestAssertion[] {
+  return test.assertions.flatMap((assertion, assertionIndex) => {
+    if (!assertion.matrix) {
+      return [
+        {
+          assertion: { ...assertion },
+          assertionIndex,
+          label: String(assertionIndex + 1),
+        },
+      ];
+    }
+
+    const combinations = getMatrixCombinations(assertion.matrix);
+    return combinations.map((combination, caseIndex) => ({
+      assertion: applyCombinationToAssertion(test, assertion, combination),
+      assertionIndex,
+      caseIndex,
+      caseCount: combinations.length,
+      label: `${assertionIndex + 1}.${caseIndex + 1}`,
+      matrixValues: combination,
+    }));
+  });
+}
+
+export function getTestAssertionPermalink(testKey: string, assertionLabel: string) {
+  return `${testKey}:${assertionLabel}`;
+}

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { EntityType } from "@featurevisor/types";
+import type { EntityType, Test } from "@featurevisor/types";
 
 export type CatalogEntityType = EntityType;
 export type EntityPath =
@@ -106,6 +106,7 @@ export interface EntityDetail<T = Record<string, unknown>> {
   editLinks?: Partial<Record<DevEditorId, string>>;
   lastModified?: LastModified;
   relationships?: Record<string, string[]>;
+  tests?: Test[];
   environments?: string[];
   historyPath?: string;
 }