@reviewflow/ui 0.0.0-stage → 6.22.0

package/src/components/pull-request-diff-impacts-summary.tsx

@@ -0,0 +1,97 @@
+import type { DiffImpactsResponse } from "@reviewflow/sdk";
+import { AccentScope, Icon, Text, View } from "alouette";
+import { InfoRegularIcon } from "alouette-icons/phosphor-icons/Info";
+import { ShareNetworkDuotoneIcon } from "alouette-icons/phosphor-icons/ShareNetwork";
+import type { ReactNode } from "react";
+import type { ImpactsStatus } from "./pull-request-diff-impacts.ts";
+import { countImpacts, pluralOf } from "./pull-request-diff-impacts.ts";
+
+interface PullRequestDiffImpactsSummaryProps {
+  /** null until read, or when it could not be */
+  impacts: DiffImpactsResponse | null;
+  status: ImpactsStatus;
+}
+
+/** Past this many, the files not analyzed are counted rather than named. */
+const maxNotAnalyzedNames = 5;
+
+const notAnalyzedFilesLine = (paths: readonly string[]): string =>
+  paths.length > maxNotAnalyzedNames
+    ? `${pluralOf(paths.length, "file")} not analyzed (not TypeScript, or deleted).`
+    : `Not analyzed (not TypeScript, or deleted): ${paths.join(", ")}.`;
+
+const notAnalyzedLines = (impacts: DiffImpactsResponse): string[] => {
+  if (impacts.tooLarge) {
+    return [
+      impacts.reason === "files"
+        ? "Impacts not analyzed: the repository is too large."
+        : "Impacts not analyzed yet: reading the repository is taking long, trying again…",
+    ];
+  }
+  return [
+    ...(impacts.notAnalyzed.length === 0
+      ? []
+      : [notAnalyzedFilesLine(impacts.notAnalyzed)]),
+    ...(impacts.unresolvedIn.length === 0
+      ? []
+      : [
+          `Importers in ${impacts.unresolvedIn.join(", ")} not analyzed: some imports resolve to no file.`,
+        ]),
+  ];
+};
+
+/**
+ * What the change's touched exports are used by outside the diff, and what
+ * could not be analyzed. While reading or after a failure it says so: never a
+ * count it does not know.
+ */
+export function PullRequestDiffImpactsSummary({
+  impacts,
+  status,
+}: PullRequestDiffImpactsSummaryProps): ReactNode {
+  if (impacts === null) {
+    if (status === "reading") {
+      return <Text className="text-xs text-muted">Reading the impacts…</Text>;
+    }
+    if (status === "failed") {
+      return (
+        <Text className="text-xs text-muted">
+          The impacts could not be read.
+        </Text>
+      );
+    }
+    return null;
+  }
+  const lines = notAnalyzedLines(impacts);
+  const counts = impacts.tooLarge ? null : countImpacts(impacts.files);
+  return (
+    <View className="gap-xs">
+      {counts === null ? null : (
+        <View className="flex-row items-start gap-xs">
+          <AccentScope accent="info">
+            <View className="pt-[2px]">
+              <Icon
+                icon={<ShareNetworkDuotoneIcon />}
+                size={18}
+                className="text-accent"
+              />
+            </View>
+          </AccentScope>
+          <Text className="shrink text-sm text-sharp">
+            {counts.exports === 0
+              ? "No touched export is used outside the diff."
+              : `${pluralOf(counts.exports, "touched export")} used in ${pluralOf(counts.files, "file")}${counts.tests === 0 ? "" : `, ${pluralOf(counts.tests, "test")}`} outside the diff.`}
+          </Text>
+        </View>
+      )}
+      {lines.map((line) => (
+        <View key={line} className="flex-row items-start gap-xs">
+          <View className="pt-[1px]">
+            <Icon icon={<InfoRegularIcon />} size={16} className="text-muted" />
+          </View>
+          <Text className="shrink text-xs text-muted">{line}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/components/pull-request-diff-impacts.ts

@@ -0,0 +1,45 @@
+import type { DiffFileImpacts } from "@reviewflow/sdk";
+
+/** `none`: no checkout, or a source that cannot read impacts. */
+export type ImpactsStatus = "failed" | "none" | "reading" | "ready";
+
+export interface ImpactCounts {
+  /** touched exports used outside the diff */
+  exports: number;
+  /** distinct importing files, tests apart */
+  files: number;
+  tests: number;
+  removed: boolean;
+}
+
+export const countImpacts = (
+  impacts: readonly DiffFileImpacts[],
+): ImpactCounts => {
+  const files = new Set<string>();
+  const tests = new Set<string>();
+  let exports = 0;
+  let removed = false;
+  for (const file of impacts) {
+    for (const impact of file.exports) {
+      exports += 1;
+      removed ||= impact.removed;
+      for (const importer of impact.importers) {
+        (importer.test ? tests : files).add(importer.path);
+      }
+    }
+  }
+  return { exports, files: files.size, tests: tests.size, removed };
+};
+
+/** Past this many files using a changed file's exports, each export carries its counts only. */
+export const maxImporterNames = 50;
+
+export const pluralOf = (count: number, word: string): string =>
+  `${String(count)} ${word}${count === 1 ? "" : "s"}`;
+
+/** "4 files · 2 tests", either part left out when it is 0. */
+export const usageLabel = ({ files, tests }: ImpactCounts): string =>
+  [
+    ...(files > 0 || tests === 0 ? [pluralOf(files, "file")] : []),
+    ...(tests > 0 ? [pluralOf(tests, "test")] : []),
+  ].join(" · ");

package/src/components/pull-request-diff-jump.ts

@@ -0,0 +1,87 @@
+import { animationDurationsMs } from "alouette";
+import { createContext, use, useSyncExternalStore } from "react";
+
+/** How long a file gone to stays outlined before the outline fades. */
+const highlightHoldMs = 1500;
+
+export interface DiffFileHighlight {
+  /** `shown` then `fading`, then no highlight at all */
+  phase: "fading" | "shown";
+  /** a CSS color, read from the theme when the file was gone to */
+  color: string;
+}
+
+/**
+ * The rendered files of a diff by path, so a link elsewhere on the screen (the
+ * overview) can bring one into view and outline it a moment, to show which
+ * one it is. The viewer registers its files; the diff view owns the registry.
+ */
+export interface DiffFileElements {
+  /** returns the unregistration */
+  register: (path: string, element: HTMLElement) => () => void;
+  elementOf: (path: string) => HTMLElement | undefined;
+  /** outlines the file's header in `color`, replacing any outline still showing */
+  highlight: (path: string, color: string) => void;
+  subscribe: (listener: () => void) => () => void;
+  highlightOf: (path: string) => DiffFileHighlight | null;
+}
+
+export const createDiffFileElements = (): DiffFileElements => {
+  const elements = new Map<string, HTMLElement>();
+  const listeners = new Set<() => void>();
+  let highlighted: (DiffFileHighlight & { path: string }) | null = null;
+  let timers: ReturnType<typeof setTimeout>[] = [];
+  const setHighlighted = (next: typeof highlighted): void => {
+    highlighted = next;
+    for (const listener of listeners) listener();
+  };
+  return {
+    register: (path, element) => {
+      elements.set(path, element);
+      return () => {
+        if (elements.get(path) === element) elements.delete(path);
+      };
+    },
+    elementOf: (path) => elements.get(path),
+    highlight: (path, color) => {
+      for (const timer of timers) clearTimeout(timer);
+      setHighlighted({ path, phase: "shown", color });
+      timers = [
+        setTimeout(() => {
+          setHighlighted({ path, phase: "fading", color });
+        }, highlightHoldMs),
+        setTimeout(() => {
+          setHighlighted(null);
+        }, highlightHoldMs + animationDurationsMs.collapse),
+      ];
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    // the same object until it changes, as useSyncExternalStore needs
+    highlightOf: (path) => (highlighted?.path === path ? highlighted : null),
+  };
+};
+
+export const DiffFileElementsContext = createContext<DiffFileElements | null>(
+  null,
+);
+
+export const useDiffFileElements = (): DiffFileElements | null =>
+  use(DiffFileElementsContext);
+
+const noSubscription = (): (() => void) => () => {};
+
+/** Re-renders only the file whose highlight changes, not every file of the diff. */
+export const useDiffFileHighlight = (
+  path: string,
+): DiffFileHighlight | null => {
+  const fileElements = useDiffFileElements();
+  return useSyncExternalStore(
+    fileElements?.subscribe ?? noSubscription,
+    () => fileElements?.highlightOf(path) ?? null,
+  );
+};

package/src/components/pull-request-diff-lines.ts

@@ -0,0 +1,103 @@
+import type { FileDiffMetadata, SelectedLineRange } from "@pierre/diffs";
+import type { PullRequestDiffSide } from "@reviewflow/sdk";
+
+export interface LineAnchor {
+  path: string;
+  side: PullRequestDiffSide;
+  line: number;
+  /** the first line of a range; null for one line */
+  startLine: number | null;
+  startSide: PullRequestDiffSide | null;
+}
+
+/** The comment being written on a diff, at most one at a time. */
+export interface Composer {
+  fileKey: string;
+  anchor: LineAnchor;
+  range: SelectedLineRange;
+}
+
+export const annotationSideOf = (
+  side: PullRequestDiffSide,
+): "additions" | "deletions" => (side === "RIGHT" ? "additions" : "deletions");
+
+const sideOf = (side: "additions" | "deletions"): PullRequestDiffSide =>
+  side === "additions" ? "RIGHT" : "LEFT";
+
+/**
+ * A drag can end above where it started. Within one side that is a swap; across
+ * the two sides of a unified diff the order is the reader's and is kept.
+ */
+export const anchorOfRange = (
+  path: string,
+  { start, end, side = "additions", endSide }: SelectedLineRange,
+): LineAnchor => {
+  const last = endSide ?? side;
+  const swapped = side === last && start > end;
+  const from = swapped ? end : start;
+  const to = swapped ? start : end;
+  const single = from === to && side === last;
+  return {
+    path,
+    side: sideOf(last),
+    line: to,
+    startLine: single ? null : from,
+    startSide: single ? null : sideOf(side),
+  };
+};
+
+const stripEol = (line: string): string => line.replace(/\r?\n$/, "");
+
+const rightLine = (
+  file: FileDiffMetadata,
+  lineNumber: number,
+): string | null => {
+  const hunk = file.hunks.find(
+    ({ additionStart, additionCount }) =>
+      lineNumber >= additionStart && lineNumber < additionStart + additionCount,
+  );
+  if (hunk === undefined) return null;
+  const line =
+    file.additionLines[
+      hunk.additionLineIndex + lineNumber - hunk.additionStart
+    ];
+  return line === undefined ? null : stripEol(line);
+};
+
+/**
+ * The new-file lines an anchor covers, for a suggestion block. Null when the
+ * range touches the old side or a line the patch does not carry (a gap
+ * between hunks), where a suggestion would replace text it never showed.
+ */
+export const rightSideLines = (
+  file: FileDiffMetadata,
+  anchor: LineAnchor,
+): string[] | null => {
+  if (anchor.side !== "RIGHT") return null;
+  if (anchor.startSide !== null && anchor.startSide !== "RIGHT") return null;
+  const first = anchor.startLine ?? anchor.line;
+  const lines: string[] = [];
+  for (let number = first; number <= anchor.line; number += 1) {
+    const line = rightLine(file, number);
+    if (line === null) return null;
+    lines.push(line);
+  }
+  return lines;
+};
+
+/** Whether a hunk of the patch carries the line on that side, context included. */
+export const isLineInPatch = (
+  file: FileDiffMetadata,
+  side: PullRequestDiffSide,
+  line: number,
+): boolean =>
+  file.hunks.some((hunk) =>
+    side === "RIGHT"
+      ? line >= hunk.additionStart &&
+        line < hunk.additionStart + hunk.additionCount
+      : line >= hunk.deletionStart &&
+        line < hunk.deletionStart + hunk.deletionCount,
+  );
+
+export const suggestionBlock = (lines: string[]): string =>
+  `\`\`\`suggestion\n${lines.join("\n")}\n\`\`\``;