@skyhook-io/k8s-ui 1.14.5 → 1.14.6

package/src/components/resources/renderers/ReflectorSection.test.tsx

@@ -0,0 +1,281 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ReflectorSection, ReflectorSummary } from "./ReflectorSection";
+import { ResourceRendererDispatch } from "../../shared/ResourceRendererDispatch";
+import type { Relationships } from "../../../types";
+
+const prefix = "reflector.v1.k8s.emberstack.com/";
+const source = { kind: "ConfigMap", namespace: "source", name: "settings" };
+const mirror = { kind: "ConfigMap", namespace: "app", name: "mirror" };
+function resource(annotations: Record<string, string> = {}) {
+  return {
+    apiVersion: "v1",
+    metadata: {
+      namespace: "app",
+      name: "mirror",
+      annotations: Object.fromEntries(
+        Object.entries(annotations).map(([k, v]) => [prefix + k, v]),
+      ),
+    },
+  };
+}
+function render(
+  annotations: Record<string, string>,
+  reflection?: Relationships["reflection"],
+) {
+  return renderToStaticMarkup(
+    <>
+      <ReflectorSummary
+        data={resource(annotations)}
+        reflection={reflection}
+        onNavigate={() => {}}
+      />
+      <ReflectorSection
+        data={resource(annotations)}
+        reflection={reflection}
+        onNavigate={() => {}}
+      />
+    </>,
+  );
+}
+
+describe("Reflector evidence and copy", () => {
+  it("leaves ordinary objects and non-core API groups alone", () => {
+    expect(render({})).toBe("");
+    expect(render({ unrelated: "true" })).toBe("");
+    expect(
+      renderToStaticMarkup(
+        <ReflectorSection
+          data={{
+            ...resource({ "reflection-allowed": "true" }),
+            apiVersion: "example.io/v1",
+          }}
+        />,
+      ),
+    ).toBe("");
+  });
+
+  it("shows source settings with OR semantics and bounded visible mirrors", () => {
+    const mirrors = Array.from({ length: 12 }, (_, i) => ({
+      ...mirror,
+      name: `mirror-${i}`,
+    }));
+    const html = render(
+      {
+        "reflection-allowed": "true",
+        "reflection-auto-enabled": "true",
+        "reflection-allowed-namespaces": "prod-.*",
+        "reflection-allowed-namespaces-selector": "team=app",
+      },
+      { mirrors },
+    );
+    expect(html).toContain("Source");
+    expect(html).toContain("Name patterns:");
+    expect(html).toContain(">or</span>");
+    expect(html).toContain("Label selector:");
+    expect(html).toContain("Show all 12 visible mirrors");
+    expect(html).toContain("app/mirror-4");
+    expect(html).not.toContain("app/mirror-5");
+    expect(html).toContain("other mirrors may exist");
+  });
+
+  it.each(["True", "TRUE", " true "])(
+    "accepts controller boolean %s and raw .NET timestamp",
+    (automatic) => {
+      const html = render(
+        {
+          reflects: "source/settings",
+          "auto-reflects": automatic,
+          "reflected-at": "2026-09-13T12:34:56.1234567+00:00",
+        },
+        { source },
+      );
+      expect(html).toContain("Automatic mirror");
+      expect(html).toContain("2026-09-13T12:34:56.1234567+00:00");
+      expect(html).not.toContain("Check reflection configuration");
+    },
+  );
+
+  it("keeps manual pre-copy state neutral and offers only observed navigation", () => {
+    const html = render({ reflects: "source/settings" }, { source });
+    expect(html).toContain("Manual mirror");
+    expect(html).toContain("No version recorded");
+    expect(html).toContain("source/settings</button>");
+    expect(html).not.toContain("Check reflection configuration");
+    expect(html).toContain("Edit the source for lasting changes");
+  });
+
+  it("does not turn a hidden source into missing, a link, or version evidence", () => {
+    const html = render(
+      { reflects: "hidden/settings", "reflected-version": "41" },
+      { source, sourceResourceVersion: "42" },
+    );
+    expect(html).toContain("hidden/settings");
+    expect(html).toContain("not available in this view");
+    expect(html).not.toContain("hidden/settings</button>");
+    expect(html).not.toContain("Source version (snapshot)");
+    expect(html).not.toContain("missing");
+    expect(html).not.toContain("Check reflection configuration");
+  });
+
+  it.each([
+    ["opaque-x", "opaque-x", "matches the source snapshot"],
+    ["opaque-x", "opaque-y", "differs from the source snapshot"],
+  ])(
+    "reports version equality without contents or health claims",
+    (copied, current, message) => {
+      const html = render(
+        { reflects: "source/settings", "reflected-version": copied },
+        { source, sourceResourceVersion: current },
+      );
+      expect(html).toContain(message);
+      expect(html).toContain("do not prove matching contents");
+      expect(html).not.toContain("Synced");
+      expect(html).not.toContain("Check reflection configuration");
+    },
+  );
+
+  it.each(["", "missing-namespace", "ns/name/extra"])(
+    "flags malformed declarations (%s)",
+    (reflects) => {
+      expect(render({ reflects })).toContain(
+        "must name a source as namespace/name",
+      );
+    },
+  );
+
+  it("flags self reference and contradictory auto-source settings", () => {
+    expect(render({ reflects: "app/mirror" })).toContain(
+      "points to this object itself",
+    );
+    expect(render({ "reflection-auto-enabled": "true" })).toContain(
+      "requires reflection-allowed to be true",
+    );
+    expect(render({ "reflection-allowed": "yes" })).toContain(
+      "must be true or false",
+    );
+  });
+
+  it("explains a declared chain without dropping either direction", () => {
+    const html = render(
+      { reflects: "source/settings", "reflection-allowed": "true" },
+      { source, mirrors: [{ ...mirror, namespace: "leaf" }] },
+    );
+    expect(html).toContain("source/settings</button>");
+    expect(html).toContain("leaf/mirror</button>");
+    expect(html).toContain("does not propagate its updates");
+  });
+
+  it("shows only explicit reflection fields rather than inferring from kind equality", () => {
+    const html = renderToStaticMarkup(
+      <ResourceRendererDispatch
+        resource={{ kind: "configmaps", namespace: "app", name: "mirror" }}
+        data={resource()}
+        relationships={{ consumers: [mirror] }}
+        onCopy={() => {}}
+        copied={null}
+        showCommonSections={false}
+      />,
+    );
+    expect(html).not.toContain("Reflector");
+  });
+
+  it.each(["configmaps", "secrets"])(
+    "wires the %s renderer and avoids duplicate generic mirror links",
+    (kind) => {
+      const ref = {
+        ...source,
+        kind: kind === "secrets" ? "Secret" : "ConfigMap",
+      };
+      const html = renderToStaticMarkup(
+        <ResourceRendererDispatch
+          resource={{ kind, namespace: "app", name: "mirror" }}
+          data={{ ...resource({ reflects: "source/settings" }), data: {} }}
+          relationships={{ configRefs: [ref], reflection: { source: ref } }}
+          onCopy={() => {}}
+          copied={null}
+          onNavigate={() => {}}
+        />,
+      );
+      expect(html).toContain("Reflector");
+      expect(html).toContain("source/settings</button>");
+      expect(html).not.toContain("Related Resources");
+      expect(html).not.toContain("Check reflection configuration");
+    },
+  );
+});
+
+describe("Reflector configuration diagnostics", () => {
+  it("does not describe a malformed reference as an active mirror chain", () => {
+    const html = render({
+      reflects: "missing-namespace",
+      "reflection-allowed": "true",
+    });
+    expect(html).toContain("Invalid source reference");
+    expect(html).not.toContain("does not propagate");
+    expect(html).not.toContain("Edit the source for lasting changes");
+  });
+  it("warns when visible mirrors reference a source that no longer allows reflection", () => {
+    const html = render({}, { mirrors: [mirror] });
+    expect(html).toContain("Reflection is not enabled on this source");
+  });
+});
+
+describe("Reflector resource hierarchy", () => {
+  it("keeps ConfigMap data ahead of detailed settings and source mirror list", () => {
+    const html = renderToStaticMarkup(
+      <ResourceRendererDispatch
+        kind="configmaps"
+        data={{
+          ...resource({ "reflection-allowed": "true" }),
+          data: { setting: "value" },
+        }}
+        resource={{ kind: "configmaps", namespace: "app", name: "mirror" }}
+        relationships={{ reflection: { mirrors: [mirror] } }}
+      />,
+    );
+    expect(html.indexOf("Data (1 keys)")).toBeLessThan(
+      html.indexOf("Reflector (1 visible mirror)"),
+    );
+    expect(html).not.toContain("Reflector mirror</");
+  });
+  it("puts TLS expiry and mirror provenance ahead of data, with details below", () => {
+    const html = renderToStaticMarkup(
+      <ResourceRendererDispatch
+        kind="secrets"
+        data={{
+          ...resource({ reflects: "source/settings" }),
+          type: "kubernetes.io/tls",
+          data: { "tls.crt": "dGVzdA==" },
+        }}
+        resource={{ kind: "secrets", namespace: "app", name: "mirror" }}
+        relationships={{
+          reflection: { source: { ...source, kind: "Secret" } },
+        }}
+        certificateInfo={
+          {
+            certificates: [
+              {
+                serialNumber: "fixture",
+                expired: true,
+                daysLeft: -1,
+                notAfter: "2026-01-01T00:00:00Z",
+                notBefore: "2025-01-01T00:00:00Z",
+                subject: "test",
+                issuer: "test",
+                dnsNames: [],
+              },
+            ],
+          } as any
+        }
+      />,
+    );
+    expect(html.indexOf("Certificate has expired")).toBeLessThan(
+      html.indexOf("Reflector mirror"),
+    );
+    expect(html.indexOf("Reflector mirror")).toBeLessThan(
+      html.indexOf(">Data</"),
+    );
+    expect(html.indexOf(">Data</")).toBeLessThan(html.indexOf(">Reflector</"));
+  });
+});

package/src/components/resources/renderers/ReflectorSection.tsx

@@ -0,0 +1,296 @@
+import { useState } from "react";
+import { Copy } from "lucide-react";
+import type { ResourceRef } from "../../../types";
+import { pluralize } from "../../../utils/pluralize";
+import { formatRelativeAgeTime } from "../../../utils/format";
+import {
+  hasReflectorDetails,
+  parseReflector,
+  type Reflection,
+  type ReflectorResource,
+} from "../../../utils/reflector";
+export {
+  hasReflectorDetails,
+  isReflectorMirror,
+  reflectorEditNotice,
+} from "../../../utils/reflector";
+import { Badge } from "../../ui/Badge";
+import {
+  AlertBanner,
+  Property,
+  PropertyList,
+  ResourceLink,
+  Section,
+} from "../../ui/drawer-components";
+
+interface ReflectorSectionProps {
+  data: ReflectorResource;
+  reflection?: Reflection;
+  onNavigate?: (ref: ResourceRef) => void;
+}
+
+function NamespaceRule({
+  patterns,
+  selector,
+}: {
+  patterns?: string;
+  selector?: string;
+}) {
+  if (!patterns && !selector) return <>No namespace restriction configured</>;
+  return (
+    <span className="space-y-1 block">
+      {patterns && (
+        <span className="block break-all">
+          <span className="text-theme-text-tertiary">Name patterns: </span>
+          {patterns}
+        </span>
+      )}
+      {patterns && selector && (
+        <span className="block text-theme-text-tertiary">or</span>
+      )}
+      {selector && (
+        <span className="block break-all">
+          <span className="text-theme-text-tertiary">Label selector: </span>
+          {selector}
+        </span>
+      )}
+    </span>
+  );
+}
+
+export function ReflectorSection({
+  data,
+  reflection,
+  onNavigate,
+}: ReflectorSectionProps) {
+  const [showAll, setShowAll] = useState(false);
+  if (!hasReflectorDetails(data, reflection)) return null;
+  const {
+    value,
+    hasDeclaration,
+    isMirror,
+    allowed,
+    autoEnabled,
+    automatic,
+    mirrors,
+    sourceSettings,
+    copiedVersion,
+    sourceVersion,
+    warnings,
+  } = parseReflector(data, reflection);
+
+  return (
+    <Section
+      title={
+        mirrors.length
+          ? `Reflector (${pluralize(mirrors.length, "visible mirror")})`
+          : "Reflector"
+      }
+      icon={Copy}
+      defaultExpanded={warnings.length > 0}
+    >
+      <div className="space-y-3">
+        <PropertyList>
+          <Property
+            label="Role"
+            value={
+              <Badge tone="structural">
+                {isMirror
+                  ? automatic === true
+                    ? "Automatic mirror"
+                    : automatic === false
+                      ? "Manual mirror"
+                      : "Mirror"
+                  : hasDeclaration
+                    ? "Invalid source reference"
+                    : "Source"}
+              </Badge>
+            }
+          />
+          {sourceSettings && (
+            <>
+              <Property
+                label="Reflection allowed"
+                value={
+                  allowed === undefined
+                    ? "Invalid annotation"
+                    : allowed
+                      ? "Yes"
+                      : "No"
+                }
+              />
+              <Property
+                label="Allowed namespaces"
+                value={
+                  <NamespaceRule
+                    patterns={value("reflection-allowed-namespaces")}
+                    selector={value("reflection-allowed-namespaces-selector")}
+                  />
+                }
+              />
+              <Property
+                label="Automatic creation"
+                value={
+                  autoEnabled === undefined
+                    ? "Invalid annotation"
+                    : autoEnabled
+                      ? "Enabled"
+                      : "Disabled"
+                }
+              />
+              {(autoEnabled ||
+                value("reflection-auto-namespaces") ||
+                value("reflection-auto-namespaces-selector")) && (
+                <Property
+                  label="Automatic namespaces"
+                  value={
+                    <NamespaceRule
+                      patterns={value("reflection-auto-namespaces")}
+                      selector={value("reflection-auto-namespaces-selector")}
+                    />
+                  }
+                />
+              )}
+              <p className="text-xs text-theme-text-tertiary">
+                Automatic destinations must also satisfy the allowed rule.
+                Controller version and settings may further limit destinations.
+              </p>
+            </>
+          )}
+          {isMirror && (
+            <>
+              <Property
+                label="Copied source version"
+                value={copiedVersion || "No version recorded"}
+              />
+              <Property
+                label="Source version (snapshot)"
+                value={sourceVersion}
+              />
+              <Property
+                label="Recorded copy time"
+                value={
+                  value("reflected-at") ? (
+                    <span title={value("reflected-at")}>
+                      {formatRelativeAgeTime(value("reflected-at"))}
+                    </span>
+                  ) : undefined
+                }
+              />
+              {copiedVersion && sourceVersion && (
+                <p className="text-xs text-theme-text-secondary">
+                  {copiedVersion === sourceVersion
+                    ? "The recorded version matches the source snapshot."
+                    : "The recorded version differs from the source snapshot."}{" "}
+                  Cached versions can lag reconciliation; matching versions do
+                  not prove matching contents.
+                </p>
+              )}
+            </>
+          )}
+        </PropertyList>
+        {mirrors.length > 0 && (
+          <div className="space-y-2">
+            <div className="text-sm text-theme-text-secondary">
+              Visible mirrors{" "}
+              <Badge tone="structural" size="sm">
+                {mirrors.length}
+              </Badge>
+            </div>
+            <div className="space-y-1 max-h-60 overflow-y-auto text-sm">
+              {(showAll ? mirrors : mirrors.slice(0, 5)).map((ref) => (
+                <div key={`${ref.namespace}/${ref.name}`} className="break-all">
+                  <ResourceLink
+                    {...ref}
+                    label={`${ref.namespace}/${ref.name}`}
+                    onNavigate={onNavigate}
+                  />
+                </div>
+              ))}
+            </div>
+            {mirrors.length > 5 && (
+              <button
+                className="text-xs text-accent-text hover:underline"
+                onClick={() => setShowAll(!showAll)}
+              >
+                {showAll
+                  ? "Show fewer"
+                  : `Show all ${mirrors.length} visible mirrors`}
+              </button>
+            )}
+            <p className="text-xs text-theme-text-tertiary">
+              Visible relationships only; other mirrors may exist.
+            </p>
+          </div>
+        )}
+        {sourceSettings && mirrors.length === 0 && (
+          <p className="text-xs text-theme-text-tertiary">
+            No mirrors visible in this view.
+          </p>
+        )}
+      </div>
+    </Section>
+  );
+}
+
+export function ReflectorSummary({
+  data,
+  reflection,
+  onNavigate,
+}: ReflectorSectionProps) {
+  if (!hasReflectorDetails(data, reflection)) return null;
+  const { isMirror, declaration, source, warnings } = parseReflector(
+    data,
+    reflection,
+  );
+  if (!isMirror && warnings.length === 0) return null;
+  return (
+    <div className="space-y-2">
+      {isMirror && (
+        <AlertBanner
+          variant="info"
+          title="Reflector mirror"
+          message={
+            <>
+              <span className="block break-all">
+                Source:{" "}
+                {source ? (
+                  <ResourceLink
+                    {...source}
+                    label={`${source.namespace}/${source.name}`}
+                    onNavigate={onNavigate}
+                  />
+                ) : (
+                  declaration
+                )}
+              </span>
+              {!source && (
+                <span className="block">
+                  Source is not available in this view; its existence and
+                  version are unverified.
+                </span>
+              )}
+              <span className="block mt-1">
+                Edit the source for lasting changes. Local edits may persist
+                until the source changes, then be overwritten.
+              </span>
+            </>
+          }
+        />
+      )}
+      {warnings.length > 0 && (
+        <AlertBanner
+          variant="warning"
+          title="Check reflection configuration"
+          message={
+            <ul className="list-disc pl-4 space-y-1">
+              {warnings.map((warning) => (
+                <li key={warning}>{warning}</li>
+              ))}
+            </ul>
+          }
+        />
+      )}
+    </div>
+  );
+}