@reviewflow/ui 0.0.0-stage → 6.22.0

package/src/components/pull-request-diff-annotations.tsx

@@ -0,0 +1,443 @@
+import type {
+  PullRequestComment,
+  PullRequestDraftComment,
+  PullRequestEdit,
+  PullRequestThread,
+} from "@reviewflow/sdk";
+import { suggestionOriginalLines } from "@reviewflow/sdk";
+import {
+  ActionButton,
+  Badge,
+  Button,
+  ExternalLinkText,
+  Text,
+  Tooltip,
+  View,
+} from "alouette";
+import type { ReactNode } from "react";
+import { useMemo, useState } from "react";
+import {
+  useDraftText,
+  useHasDraftText,
+} from "../services/PullRequestDraftsProvider.tsx";
+import type { PendingComment } from "../services/PullRequestReviewDraftProvider.tsx";
+import { errorToMessage } from "../services/errorToMessage.ts";
+import { formatDataAge } from "../services/formatDataAge.ts";
+import { SuggestionOriginalContext } from "./markdown-suggestion.tsx";
+import { MarkdownText } from "./markdown-text.tsx";
+import { PersonAvatar } from "./pull-request-conversation-person.tsx";
+import type { LineAnchor } from "./pull-request-diff-lines.ts";
+import { suggestionBlock } from "./pull-request-diff-lines.ts";
+import { PullRequestMarkdownInput } from "./pull-request-markdown-input.tsx";
+import { PullRequestReactions } from "./pull-request-reactions.tsx";
+import { SuggestionActions } from "./pull-request-suggestion-actions.tsx";
+
+export type AnnotationItem =
+  | { kind: "composer"; anchor: LineAnchor; suggestionLines: string[] | null }
+  | { kind: "pending"; comment: PendingComment }
+  | { kind: "thread"; thread: PullRequestThread };
+
+/** One diff line holds one slot, so everything anchored there shares an annotation. */
+export interface AnnotationGroup {
+  items: AnnotationItem[];
+}
+
+export type EditPullRequest = (edit: PullRequestEdit) => Promise<void>;
+
+export interface ReviewDraftActions {
+  hasPending: boolean;
+  add: (comment: PullRequestDraftComment) => void;
+  update: (key: string, body: string) => void;
+  remove: (key: string) => void;
+}
+
+/** Flat: it sits inside the file's card, which is already raised. */
+function Frame({ children }: { children: ReactNode }): ReactNode {
+  return (
+    <View className="p-xs">
+      <View className="min-w-0 gap-sm rounded-sm border border-border-muted p-m">
+        {children}
+      </View>
+    </View>
+  );
+}
+
+interface CommentViewProps {
+  thread: PullRequestThread;
+  comment: PullRequestComment;
+  onEdit: EditPullRequest;
+}
+
+function CommentView({ thread, comment, onEdit }: CommentViewProps): ReactNode {
+  return (
+    <View className="gap-xs">
+      <View className="flex-row flex-wrap items-center gap-xs">
+        <PersonAvatar person={comment.author} />
+        <Text className="text-sm font-body-bold">{comment.author.login}</Text>
+        <ExternalLinkText
+          size="sm"
+          href={comment.url}
+          text={formatDataAge(comment.createdAt)}
+        />
+      </View>
+      {comment.body.trim() === "" ? null : (
+        <MarkdownText github text={comment.body} />
+      )}
+      <SuggestionActions thread={thread} comment={comment} />
+      <PullRequestReactions subject={comment} onEdit={onEdit} />
+    </View>
+  );
+}
+
+interface ThreadAnnotationProps {
+  thread: PullRequestThread;
+  onEdit: EditPullRequest;
+}
+
+/** Resolved threads start folded, as on GitHub. */
+export function ThreadAnnotation({
+  thread,
+  onEdit,
+}: ThreadAnnotationProps): ReactNode {
+  const [open, setOpen] = useState(!thread.resolved);
+  // shared with the conversation tab's reply box of the same thread
+  const reply = useDraftText(`reply:${thread.id}`);
+  const first = thread.comments[0];
+  const unlisted = thread.commentsTotal - thread.comments.length;
+  const original = useMemo(() => suggestionOriginalLines(thread), [thread]);
+
+  if (!open) {
+    return (
+      <Frame>
+        <View className="flex-row flex-wrap items-center gap-xs">
+          <Badge accent="success" size="sm">
+            Resolved
+          </Badge>
+          <Text className="text-sm text-muted">
+            {`${first?.author.login ?? "thread"}, ${String(thread.commentsTotal)} comment${thread.commentsTotal === 1 ? "" : "s"}`}
+          </Text>
+          <Button
+            size="sm"
+            accent="neutral"
+            variant="soft"
+            text="Show"
+            onPress={() => {
+              setOpen(true);
+            }}
+          />
+        </View>
+      </Frame>
+    );
+  }
+
+  return (
+    <Frame>
+      {thread.resolved ? (
+        <View className="flex-row items-center gap-xs">
+          <Badge accent="success" size="sm">
+            Resolved
+          </Badge>
+          <Button
+            size="sm"
+            accent="neutral"
+            variant="soft"
+            text="Hide"
+            onPress={() => {
+              setOpen(false);
+            }}
+          />
+        </View>
+      ) : null}
+      <SuggestionOriginalContext value={original}>
+        {thread.comments.map((comment) => (
+          <CommentView
+            key={comment.id}
+            thread={thread}
+            comment={comment}
+            onEdit={onEdit}
+          />
+        ))}
+      </SuggestionOriginalContext>
+      {unlisted > 0 ? (
+        <Text className="text-xs text-muted">
+          {`${String(unlisted)} more comment${unlisted === 1 ? "" : "s"} on GitHub`}
+        </Text>
+      ) : null}
+      {thread.viewerCanReply && first !== undefined ? (
+        <View className="gap-xs">
+          <PullRequestMarkdownInput
+            aria-label="Reply"
+            value={reply.text}
+            onChange={reply.setText}
+          />
+          <View className="flex-row flex-wrap items-center justify-end gap-xs">
+            {thread.resolved && thread.viewerCanUnresolve ? (
+              <Tooltip
+                content="Open the thread again, here and on GitHub"
+                render={(triggerProps) => (
+                  <ActionButton
+                    {...triggerProps}
+                    size="sm"
+                    accent="neutral"
+                    variant="soft"
+                    text="Unresolve"
+                    errorMessageVariant="flat"
+                    errorToMessage={errorToMessage}
+                    onPress={async () => {
+                      await onEdit({
+                        kind: "resolveThread",
+                        threadId: thread.id,
+                        resolved: false,
+                      });
+                    }}
+                  />
+                )}
+              />
+            ) : null}
+            {!thread.resolved && thread.viewerCanResolve ? (
+              <Tooltip
+                content="Mark the thread done: it folds, here and on GitHub"
+                render={(triggerProps) => (
+                  <ActionButton
+                    {...triggerProps}
+                    size="sm"
+                    accent="neutral"
+                    variant="soft"
+                    text="Resolve"
+                    errorMessageVariant="flat"
+                    errorToMessage={errorToMessage}
+                    onPress={async () => {
+                      await onEdit({
+                        kind: "resolveThread",
+                        threadId: thread.id,
+                        resolved: true,
+                      });
+                    }}
+                  />
+                )}
+              />
+            ) : null}
+            <ActionButton
+              size="sm"
+              text="Reply"
+              errorMessageVariant="flat"
+              errorToMessage={errorToMessage}
+              onPress={async () => {
+                const sent = reply.text;
+                if (sent.trim() === "") return;
+                await onEdit({
+                  kind: "reply",
+                  inReplyTo: first.databaseId,
+                  body: sent,
+                });
+                reply.discard(sent);
+              }}
+            />
+          </View>
+        </View>
+      ) : null}
+    </Frame>
+  );
+}
+
+interface PendingAnnotationProps {
+  comment: PendingComment;
+  draft: ReviewDraftActions;
+}
+
+export function PendingAnnotation({
+  comment,
+  draft,
+}: PendingAnnotationProps): ReactNode {
+  const draftKey = `pending:${comment.key}`;
+  const hasDraft = useHasDraftText(draftKey);
+  const [editing, setEditing] = useState(hasDraft);
+  const body = useDraftText(draftKey, comment.body);
+
+  return (
+    <Frame>
+      <View className="flex-row flex-wrap items-center gap-xs">
+        <Badge accent="warning" size="sm">
+          Pending
+        </Badge>
+        <Text className="text-sm text-muted">sent with your review</Text>
+      </View>
+      {editing ? (
+        <View className="gap-xs">
+          <PullRequestMarkdownInput
+            aria-label="Pending comment"
+            value={body.text}
+            onChange={body.setText}
+          />
+          <View className="flex-row justify-end gap-xs">
+            <Button
+              size="sm"
+              accent="neutral"
+              variant="soft"
+              text="Cancel"
+              onPress={() => {
+                body.discard();
+                setEditing(false);
+              }}
+            />
+            <Button
+              size="sm"
+              text="Save"
+              onPress={() => {
+                if (body.text.trim() === "") return;
+                draft.update(comment.key, body.text);
+                body.discard();
+                setEditing(false);
+              }}
+            />
+          </View>
+        </View>
+      ) : (
+        <>
+          <MarkdownText github text={comment.body} />
+          <View className="flex-row gap-xs">
+            <Button
+              size="sm"
+              accent="neutral"
+              text="Edit"
+              onPress={() => {
+                setEditing(true);
+              }}
+            />
+            <Button
+              size="sm"
+              accent="danger"
+              variant="soft"
+              text="Delete"
+              onPress={() => {
+                draft.remove(comment.key);
+              }}
+            />
+          </View>
+        </>
+      )}
+    </Frame>
+  );
+}
+
+interface ComposerAnnotationProps {
+  anchor: LineAnchor;
+  suggestionLines: string[] | null;
+  commitId: string;
+  /**
+   * null on a single commit's diff: a review is sent on the pull request's
+   * head, so a comment anchored on another commit goes out alone.
+   */
+  draft: ReviewDraftActions | null;
+  onEdit: EditPullRequest;
+  onClose: () => void;
+}
+
+export function ComposerAnnotation({
+  anchor,
+  suggestionLines,
+  commitId,
+  draft,
+  onEdit,
+  onClose,
+}: ComposerAnnotationProps): ReactNode {
+  const body = useDraftText(
+    `inline:${commitId}:${anchor.path}:${anchor.side}:${String(anchor.startLine ?? "")}-${String(anchor.line)}`,
+  );
+  const close = (): void => {
+    body.discard();
+    onClose();
+  };
+  const range =
+    anchor.startLine === null
+      ? `line ${String(anchor.line)}`
+      : `lines ${String(anchor.startLine)} to ${String(anchor.line)}`;
+  const comment = {
+    path: anchor.path,
+    side: anchor.side,
+    line: anchor.line,
+    startLine: anchor.startLine,
+    startSide: anchor.startSide,
+    body: body.text,
+  };
+
+  return (
+    <Frame>
+      <Text className="text-sm text-muted">{`Comment on ${range}`}</Text>
+      <PullRequestMarkdownInput
+        // oxlint-disable-next-line jsx-a11y/no-autofocus -- the composer is opened by pressing a line, the reader expects to type
+        autoFocus
+        aria-label="Comment"
+        value={body.text}
+        onChange={body.setText}
+      />
+      <View className="flex-row flex-wrap items-center gap-xs">
+        {suggestionLines === null ? null : (
+          <Tooltip
+            content="Insert the selected lines as a suggested change, which can then be committed to the branch, from here or GitHub"
+            render={(triggerProps) => (
+              <Button
+                {...triggerProps}
+                size="sm"
+                accent="neutral"
+                text="Suggestion"
+                onPress={() => {
+                  body.setText(
+                    `${body.text}${body.text === "" ? "" : "\n"}${suggestionBlock(suggestionLines)}`,
+                  );
+                }}
+              />
+            )}
+          />
+        )}
+        <View className="ml-auto flex-row flex-wrap items-center justify-end gap-xs">
+          <Button
+            size="sm"
+            accent="neutral"
+            variant="soft"
+            text="Cancel"
+            onPress={close}
+          />
+          {draft === null ? null : (
+            <Tooltip
+              content="Keep the comment pending: it is sent with your review, from Review changes"
+              render={(triggerProps) => (
+                <Button
+                  {...triggerProps}
+                  size="sm"
+                  accent="neutral"
+                  text={
+                    draft.hasPending ? "Add review comment" : "Start a review"
+                  }
+                  onPress={() => {
+                    if (body.text.trim() === "") return;
+                    draft.add(comment);
+                    close();
+                  }}
+                />
+              )}
+            />
+          )}
+          <Tooltip
+            content="Post this comment now, on its own, outside any review"
+            render={(triggerProps) => (
+              <ActionButton
+                {...triggerProps}
+                size="sm"
+                text="Add single comment"
+                errorMessageVariant="flat"
+                errorToMessage={errorToMessage}
+                onPress={async () => {
+                  if (comment.body.trim() === "") return;
+                  await onEdit({ kind: "inlineComment", commitId, comment });
+                  body.discard(comment.body);
+                  onClose();
+                }}
+              />
+            )}
+          />
+        </View>
+      </View>
+    </Frame>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { useMemo, useState } from "react";
+
+export interface PullRequestCollapse {
+  /** `byDefault`: what the file does until the reader chose, e.g. viewed files start closed */
+  isCollapsed: (fileKey: string, byDefault: boolean) => boolean;
+  set: (fileKey: string, collapsed: boolean) => void;
+  expandAll: () => void;
+  collapseAll: () => void;
+}
+
+interface CollapseState {
+  /** null: no "all" pressed, every file follows its own default */
+  all: boolean | null;
+  overrides: Readonly<Record<string, boolean>>;
+}
+
+export const usePullRequestCollapse = (): PullRequestCollapse => {
+  const [state, setState] = useState<CollapseState>({
+    all: null,
+    overrides: {},
+  });
+
+  // stable until a press, so the memoized viewer is not rendered again for nothing
+  return useMemo(
+    () => ({
+      isCollapsed: (fileKey, byDefault) =>
+        state.overrides[fileKey] ?? state.all ?? byDefault,
+      set: (fileKey, collapsed) => {
+        setState((previous) => ({
+          all: previous.all,
+          overrides: { ...previous.overrides, [fileKey]: collapsed },
+        }));
+      },
+      expandAll: () => {
+        setState({ all: false, overrides: {} });
+      },
+      collapseAll: () => {
+        setState({ all: true, overrides: {} });
+      },
+    }),
+    [state],
+  );
+};

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

@@ -0,0 +1,174 @@
+import type {
+  DiffStep,
+  DiffWhitespace,
+  PullRequestDiffResponse,
+  PullRequestRef,
+} from "@reviewflow/sdk";
+import type {
+  PullRequestDiffRefusal,
+  PullRequestImpactsState,
+  PullRequestReadingOrderState,
+  PullRequestShas,
+  RepositoryAttachment,
+} from "../dataSource.ts";
+import { usePullRequestDataSource } from "../dataSource.ts";
+
+/** A pull request and the two shas its diff is read between. */
+export interface PullRequestDiffTarget extends PullRequestRef {
+  head: string;
+  base: string;
+}
+
+interface DiffState {
+  diff: PullRequestDiffResponse | null;
+  error: string | null;
+  loading: boolean;
+  /** what a read in progress is waiting on, when the source says */
+  step: DiffStep | null;
+  /** the source would not read: no checkout it may use */
+  refused: PullRequestDiffRefusal | null;
+}
+
+/**
+ * Keyed by the source on the range, which two shas name for good: a diff once
+ * read is not read again, and the previous diff stays while the next loads.
+ */
+export const usePullRequestDiff = (
+  { ownerRepo, number, head, base }: PullRequestDiffTarget,
+  whitespace: DiffWhitespace,
+): DiffState => {
+  const { useDiff } = usePullRequestDataSource();
+  const { value, error, reading, step, refused } = useDiff(
+    { ownerRepo, number },
+    { head, base, whitespace },
+  );
+  return { diff: value, error, loading: reading, step, refused };
+};
+
+const useAlwaysAttached = (): RepositoryAttachment => ({
+  status: "attached",
+  detail: "",
+});
+
+/**
+ * Why the diff's options that read every file or every commit are off, or
+ * null when the repository has a local checkout: from GitHub they would cost
+ * a request a commit, and the reading order is read from git only. A source
+ * without `useRepositoryAttachment` always has its checkouts; an attachment
+ * not known yet, or not readable, counts as none.
+ */
+export const useMissingCheckoutReason = (
+  ref: PullRequestRef,
+): string | null => {
+  const { useRepositoryAttachment } = usePullRequestDataSource();
+  const attachment = (useRepositoryAttachment ?? useAlwaysAttached)(ref);
+  if (attachment === null) {
+    return "Whether the repository has a local checkout is not known";
+  }
+  if (attachment.status === "attached") return null;
+  return `Needs a local checkout: ${attachment.detail}`;
+};
+
+const notOrdered: PullRequestReadingOrderState = {
+  value: null,
+  cached: false,
+  reading: false,
+  error: null,
+  refused: null,
+};
+
+const useNoReadingOrder = (): PullRequestReadingOrderState => notOrdered;
+
+interface ReadingOrderState extends PullRequestReadingOrderState {
+  /** the source can order the files for reading */
+  available: boolean;
+}
+
+/** Read only while `wanted`; never read again once read for a range. */
+export const usePullRequestReadingOrder = (
+  { ownerRepo, number, head, base }: PullRequestDiffTarget,
+  wanted: boolean,
+): ReadingOrderState => {
+  const { useReadingOrder } = usePullRequestDataSource();
+  const read = (useReadingOrder ?? useNoReadingOrder)(
+    { ownerRepo, number },
+    wanted ? { head, base } : null,
+  );
+  return { ...read, available: useReadingOrder !== undefined };
+};
+
+const notAnalyzed: PullRequestImpactsState = {
+  value: null,
+  cached: false,
+  reading: false,
+  error: null,
+  refused: null,
+};
+
+const useNoImpacts = (): PullRequestImpactsState => notAnalyzed;
+
+/** Read only while `wanted`; never read again once read for a range. */
+export const usePullRequestImpacts = (
+  { ownerRepo, number, head, base }: PullRequestDiffTarget,
+  wanted: boolean,
+): PullRequestImpactsState => {
+  const { useImpacts } = usePullRequestDataSource();
+  return (useImpacts ?? useNoImpacts)(
+    { ownerRepo, number },
+    wanted ? { head, base } : null,
+  );
+};
+
+/**
+ * The diff shows a range the pull request has left (a review in progress
+ * pinned it). Threads and viewed marks are read on the pull request's own
+ * range, so on a file changed since then a thread's line names other code and a
+ * viewed mark would be set on a version not shown.
+ */
+export interface PullRequestMovedOn {
+  /** every path changed since the diff's head, renames by both names; null until known */
+  paths: ReadonlySet<string> | null;
+  /** the old side's lines name another base */
+  baseMoved: boolean;
+}
+
+const renameSourcePattern = /^rename from (.+)$/gmu;
+
+export const changedPathsOf = (diff: PullRequestDiffResponse): Set<string> =>
+  new Set([
+    ...diff.groups.flatMap(({ paths }) => paths),
+    ...diff.omitted.map(({ path }) => path),
+    ...[...diff.patch.matchAll(renameSourcePattern)].flatMap(([, from]) =>
+      from === undefined ? [] : [from],
+    ),
+  ]);
+
+/**
+ * Unknown counts as every file changed: a misplaced thread is worse than a
+ * listed one. Whitespace is shown whatever the diff hides: a line reindented
+ * since the review started still moved what a thread's number names.
+ */
+export const usePullRequestMovedOn = (
+  ref: PullRequestRef,
+  shown: PullRequestShas | null,
+  latest: PullRequestShas | null,
+): PullRequestMovedOn | null => {
+  const headMoved =
+    shown !== null && latest !== null && shown.head !== latest.head;
+  const { useDiff } = usePullRequestDataSource();
+  const { value: data, cached } = useDiff(
+    { ownerRepo: ref.ownerRepo, number: ref.number },
+    headMoved
+      ? { base: shown.head, head: latest.head, whitespace: "show" }
+      : null,
+  );
+  if (shown === null || latest === null) return null;
+  const baseMoved = shown.base !== latest.base;
+  if (!headMoved && !baseMoved) return null;
+  if (!headMoved) return { paths: new Set(), baseMoved };
+  // a cached value is the previous range's, kept while this one loads
+  return {
+    paths: data === null || cached ? null : changedPathsOf(data),
+    baseMoved,
+  };
+};