@reviewflow/ui 0.0.0-stage → 6.21.0

package/src/components/pull-request-commit-files.ts

@@ -0,0 +1,143 @@
+import type { PullRequestCommit } from "@reviewflow/sdk";
+
+/**
+ * How a file of one commit's diff relates to the pull request's diff, which
+ * threads, pending comments and viewed marks are read on.
+ *
+ * - `pullRequest`: no other commit of the pull request changes it, so both
+ *   sides of this commit's diff are the pull request's.
+ * - `head`: an earlier commit changed it too: the new side is the head's, the
+ *   old side is not the base's.
+ * - `commit`: a later commit changes it again: neither side is the pull
+ *   request's, so a comment is anchored on this commit and goes out alone.
+ */
+export type CommitFileAnchoring = "commit" | "head" | "pullRequest";
+
+export type CommitsToRead =
+  | { kind: "available"; commits: PullRequestCommit[] }
+  | { kind: "none" }
+  | { kind: "unavailable"; reason: string };
+
+interface CommitsToReadParams {
+  /** oldest first, as GitHub lists them */
+  listed: PullRequestCommit[];
+  /** every commit of the pull request, `listed` included */
+  total: number;
+  /** the head the diff shows */
+  head: string;
+}
+
+const isChain = (commits: PullRequestCommit[]): boolean =>
+  commits.every(
+    (commit, index) =>
+      index === 0 || commit.parentOid === commits[index - 1]?.oid,
+  );
+
+/**
+ * The commits up to the head shown, which can be read one by one only when
+ * each one's diff against its parent is a part of the pull request's: a chain
+ * with no merge, which a merge would break by carrying what it merged in.
+ */
+export const commitsToRead = ({
+  listed,
+  total,
+  head,
+}: CommitsToReadParams): CommitsToRead => {
+  const end = listed.findIndex(({ oid }) => oid === head);
+  if (end === -1) {
+    return {
+      kind: "unavailable",
+      reason:
+        total > listed.length
+          ? "The pull request has more commits than GitHub lists at once"
+          : "The commits listed do not lead to the head shown",
+    };
+  }
+  const commits = listed.slice(0, end + 1);
+  if (commits.length < 2) return { kind: "none" };
+  if (commits.some(({ merge }) => merge)) {
+    return {
+      kind: "unavailable",
+      reason: "A merge commit's own diff carries what it merged in",
+    };
+  }
+  if (commits[0]?.parentOid === null || !isChain(commits)) {
+    return {
+      kind: "unavailable",
+      reason: "The commits do not follow one another",
+    };
+  }
+  return { kind: "available", commits };
+};
+
+/** The index of the commit after `oid`; 0, every commit, when `oid` is null or not one of them. */
+export const firstCommitAfter = (
+  commits: PullRequestCommit[],
+  oid: string | null,
+): number =>
+  oid === null ? 0 : commits.findIndex((commit) => commit.oid === oid) + 1;
+
+/** No path is changed by more than one commit. */
+export const touchDifferentFiles = (
+  pathsByCommit: readonly ReadonlySet<string>[],
+): boolean => {
+  const seen = new Set<string>();
+  for (const paths of pathsByCommit) {
+    for (const path of paths) {
+      if (seen.has(path)) return false;
+      seen.add(path);
+    }
+  }
+  return true;
+};
+
+const unionOf = (pathsByCommit: readonly ReadonlySet<string>[]): Set<string> =>
+  new Set(pathsByCommit.flatMap((paths) => [...paths]));
+
+/** Every path of the commit at `index`, with how it is anchored. */
+export const commitAnchorings = (
+  pathsByCommit: readonly ReadonlySet<string>[],
+  index: number,
+): Map<string, CommitFileAnchoring> => {
+  const earlier = unionOf(pathsByCommit.slice(0, index));
+  const later = unionOf(pathsByCommit.slice(index + 1));
+  const anchoringOf = (path: string): CommitFileAnchoring => {
+    if (later.has(path)) return "commit";
+    if (earlier.has(path)) return "head";
+    return "pullRequest";
+  };
+  return new Map(
+    [...(pathsByCommit[index] ?? [])].map((path) => [path, anchoringOf(path)]),
+  );
+};
+
+/** What one commit changes, to pick it from a list. */
+export interface CommitSummary {
+  /** the commit's workspaces, the root named "Root" */
+  workspaces: string[];
+  /** the files it changes, as `changedPathsOf` counts them */
+  files: number;
+}
+
+interface SummarizeCommitsParams {
+  /** the diff of each readable commit, as loaded */
+  diffs: readonly { groups: readonly { name: string }[] }[];
+  /** the paths each diff changes, aligned with `diffs` */
+  pathsByCommit: readonly ReadonlySet<string>[];
+  /** where the stepped commits start in the readable ones */
+  sinceIndex: number;
+}
+
+/**
+ * The summaries of the stepped commits: the diffs are those of every readable
+ * commit, so those before `sinceIndex` are left out, as the commits are.
+ */
+export const summarizeCommits = ({
+  diffs,
+  pathsByCommit,
+  sinceIndex,
+}: SummarizeCommitsParams): CommitSummary[] =>
+  diffs.slice(sinceIndex).map(({ groups }, index) => ({
+    workspaces: groups.map(({ name }) => (name === "" ? "Root" : name)),
+    files: pathsByCommit[sinceIndex + index]?.size ?? 0,
+  }));

package/src/components/pull-request-commits.tsx

@@ -0,0 +1,221 @@
+import type {
+  PullRequestCommit,
+  PullRequestDetailResponse,
+  PullRequestEdit,
+} from "@reviewflow/sdk";
+import {
+  Button,
+  Code,
+  InfoMessage,
+  PressableListItem,
+  Text,
+  View,
+} from "alouette";
+import { ArrowLeftRegularIcon } from "alouette-icons/phosphor-icons/ArrowLeft";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { usePullRequestDataSource } from "../dataSource.ts";
+import { formatDataAge } from "../services/formatDataAge.ts";
+import { PersonAvatar } from "./pull-request-conversation-person.tsx";
+import { PullRequestDiffView } from "./pull-request-diff-view.tsx";
+import {
+  PullRequestPartError,
+  PullRequestPartPending,
+  PullRequestPartReading,
+} from "./pull-request-part-notice.tsx";
+
+export interface PullRequestCommitsProps {
+  detail: PullRequestDetailResponse;
+  /** reads the pull request again once GitHub took a comment */
+  onEdited: (edit: PullRequestEdit) => Promise<void>;
+  /**
+   * The commit whose diff is open, by oid; absent: the component holds it
+   * itself. Pass it, with `onOpenCommitChange`, to keep it in a url.
+   */
+  openCommit?: string | null;
+  onOpenCommitChange?: (oid: string | null) => void;
+}
+
+const shortSha = (oid: string): string => oid.slice(0, 7);
+
+const dayOf = (commit: PullRequestCommit): string =>
+  new Date(commit.committedAt).toLocaleDateString([], {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+
+interface CommitRowProps {
+  commit: PullRequestCommit;
+  onOpen: () => void;
+}
+
+/** A link, as a board row is: it opens the commit's own page, which a url keeps. */
+function CommitRow({ commit, onOpen }: CommitRowProps): ReactNode {
+  const login = commit.author?.login ?? "unknown";
+
+  return (
+    <PressableListItem
+      role="link"
+      aria-label={`Show the changes of ${commit.headline}`}
+      onPress={onOpen}
+    >
+      <View className="flex-row items-center gap-sm">
+        <PersonAvatar person={commit.author} />
+        <View className="min-w-0 flex-1">
+          <Text className="text-sm font-body-bold" numberOfLines={1}>
+            {commit.headline}
+          </Text>
+          <Text className="text-xs text-muted" numberOfLines={1}>
+            {`${login} committed ${formatDataAge(commit.committedAt)}`}
+          </Text>
+        </View>
+        <Code className="text-xs">{shortSha(commit.oid)}</Code>
+      </View>
+    </PressableListItem>
+  );
+}
+
+interface CommitDiffProps {
+  detail: PullRequestDetailResponse;
+  commit: PullRequestCommit;
+  onBack: () => void;
+  onEdited: (edit: PullRequestEdit) => Promise<void>;
+}
+
+/**
+ * A commit's own diff. A comment is anchored on the commit, as GitHub's
+ * commit view does, on the new side only: GitHub reads the old side's line
+ * numbers against the pull request's base, not this commit's parent.
+ */
+function CommitDiff({
+  detail,
+  commit,
+  onBack,
+  onEdited,
+}: CommitDiffProps): ReactNode {
+  const { pullRequest } = detail;
+  const dataSource = usePullRequestDataSource();
+  return (
+    <View className="gap-m">
+      <View className="flex-row flex-wrap items-center gap-sm">
+        <Button
+          text="Back to commits"
+          icon={<ArrowLeftRegularIcon />}
+          accent="neutral"
+          variant="tonal"
+          size="sm"
+          onPress={onBack}
+        />
+        <Text className="min-w-0 flex-1 text-sm font-body-bold">
+          {commit.headline}
+        </Text>
+        <Code className="text-xs">{shortSha(commit.oid)}</Code>
+      </View>
+      {commit.body.trim() === "" ? null : (
+        <Text className="select-auto font-mono text-xs text-muted">
+          {commit.body}
+        </Text>
+      )}
+      {commit.parentOid === null ? (
+        <InfoMessage>
+          This is a root commit with no parent: its changes cannot be shown.
+        </InfoMessage>
+      ) : (
+        <PullRequestDiffView
+          range={{
+            ownerRepo: pullRequest.ownerRepo,
+            number: pullRequest.number,
+            head: commit.oid,
+            base: commit.parentOid,
+          }}
+          review={{
+            commentable: true,
+            rightOnly: true,
+            commitOid: commit.oid,
+            headSha: pullRequest.headSha,
+            threads: [],
+            files: [],
+            onEdit: async (edit) => {
+              await dataSource.edit(pullRequest, edit);
+              await onEdited(edit);
+            },
+            onViewed: () => Promise.resolve(),
+          }}
+        />
+      )}
+    </View>
+  );
+}
+
+/** Oldest first, grouped by day as on GitHub; pressing a commit shows its own diff, read-only. */
+export function PullRequestCommits({
+  detail,
+  onEdited,
+  openCommit,
+  onOpenCommitChange,
+}: PullRequestCommitsProps): ReactNode {
+  const { pullRequest } = detail;
+  const { usePart } = usePullRequestDataSource();
+  const [localOid, setLocalOid] = useState<string | null>(null);
+  const openOid = openCommit === undefined ? localOid : openCommit;
+  const { value, error, reading } = usePart(pullRequest, "commits");
+  if (value === null) {
+    return <PullRequestPartPending error={error} what="the commits" />;
+  }
+  const { commits: listed } = value;
+  const opened = listed.find(({ oid }) => oid === openOid);
+  const setOpenOid = (oid: string | null): void => {
+    setLocalOid(oid);
+    onOpenCommitChange?.(oid);
+  };
+
+  if (opened !== undefined) {
+    return (
+      <CommitDiff
+        key={opened.oid}
+        detail={detail}
+        commit={opened}
+        onEdited={onEdited}
+        onBack={() => {
+          setOpenOid(null);
+        }}
+      />
+    );
+  }
+
+  const days = new Map<string, PullRequestCommit[]>();
+  for (const commit of listed) {
+    const day = dayOf(commit);
+    const ofDay = days.get(day);
+    if (ofDay === undefined) days.set(day, [commit]);
+    else ofDay.push(commit);
+  }
+  const unlisted = pullRequest.commitsTotal - listed.length;
+
+  return (
+    <View className="gap-m">
+      <PullRequestPartReading reading={reading} />
+      <PullRequestPartError error={error} />
+      {[...days].map(([day, commits]) => (
+        <View key={day} className="gap-xs">
+          <Text className="text-xs font-body-bold text-muted">{day}</Text>
+          {commits.map((commit) => (
+            <CommitRow
+              key={commit.oid}
+              commit={commit}
+              onOpen={() => {
+                setOpenOid(commit.oid);
+              }}
+            />
+          ))}
+        </View>
+      ))}
+      {unlisted > 0 ? (
+        <Text className="text-xs text-muted">
+          {`${String(unlisted)} more commit${unlisted === 1 ? "" : "s"} not listed`}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/pull-request-conversation-card.tsx

@@ -0,0 +1,220 @@
+import type {
+  PullRequestEdit,
+  PullRequestPerson,
+  PullRequestReactable,
+  PullRequestReviewState,
+} from "@reviewflow/sdk";
+import type { Accent } from "alouette";
+import {
+  Badge,
+  Box,
+  ExternalLinkText,
+  IconButton,
+  Text,
+  Tooltip,
+  View,
+} from "alouette";
+import { PencilSimpleRegularIcon } from "alouette-icons/phosphor-icons/PencilSimple";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { useHasDraftText } from "../services/PullRequestDraftsProvider.tsx";
+import { formatDataAge } from "../services/formatDataAge.ts";
+import { linkInRow } from "./link-in-row.ts";
+import { MarkdownText } from "./markdown-text.tsx";
+import type { ConversationEditing } from "./pull-request-conversation-edit.tsx";
+import { BodyEditor, useSendEdit } from "./pull-request-conversation-edit.tsx";
+import { PersonAvatar } from "./pull-request-conversation-person.tsx";
+import { PullRequestReactions } from "./pull-request-reactions.tsx";
+import { EditedLink } from "./pull-request-revisions.tsx";
+
+const verdictLabel = (state: PullRequestReviewState): string => {
+  if (state === "approved") return "approved these changes";
+  if (state === "changesRequested") return "requested changes";
+  if (state === "dismissed") return "review dismissed";
+  if (state === "pending") return "pending review";
+  return "reviewed";
+};
+
+const verdictAccent = (state: PullRequestReviewState): Accent => {
+  if (state === "approved") return "success";
+  if (state === "changesRequested") return "danger";
+  if (state === "pending") return "warning";
+  return "info";
+};
+
+interface CardHeaderProps {
+  author: PullRequestPerson | null;
+  /** a review's verdict, shown as a badge instead of `action` */
+  verdict?: PullRequestReviewState;
+  action: string;
+  createdAt: string;
+  url: string;
+  edited: ReactNode;
+  onEdit: (() => void) | null;
+}
+
+function CardHeader({
+  author,
+  verdict,
+  action,
+  createdAt,
+  url,
+  edited,
+  onEdit,
+}: CardHeaderProps): ReactNode {
+  return (
+    <View className="flex-row items-center gap-xs">
+      <View className="min-w-0 flex-1 flex-row flex-wrap items-center gap-xs">
+        <PersonAvatar person={author} />
+        <Text className="text-sm font-body-bold">
+          {author?.login ?? "ghost"}
+        </Text>
+        {verdict === undefined ? (
+          <Text className="text-sm text-muted">{action}</Text>
+        ) : (
+          <Badge accent={verdictAccent(verdict)} size="sm">
+            {verdictLabel(verdict)}
+          </Badge>
+        )}
+        <ExternalLinkText
+          size="sm"
+          href={url}
+          text={formatDataAge(createdAt)}
+          className={linkInRow}
+        />
+        {edited}
+      </View>
+      {onEdit === null ? null : (
+        <Tooltip
+          content="Edit the text, on GitHub too"
+          render={(triggerProps) => (
+            <IconButton
+              {...triggerProps}
+              icon={<PencilSimpleRegularIcon />}
+              aria-label="Edit"
+              accent="neutral"
+              variant="soft"
+              size="sm"
+              onPress={onEdit}
+            />
+          )}
+        />
+      )}
+    </View>
+  );
+}
+
+interface CommentCardProps {
+  editing: ConversationEditing;
+  author: PullRequestPerson | null;
+  action: string;
+  verdict?: PullRequestReviewState;
+  createdAt: string;
+  lastEditedAt: string | null;
+  url: string;
+  body: string;
+  /** what an empty body says; without it an empty body renders nothing */
+  emptyText?: string;
+  canEdit: boolean;
+  toEdit: (body: string) => PullRequestEdit;
+  /** what the reactions under the body are those of */
+  reactable: PullRequestReactable;
+  /** inside a thread's frame, which is already the card */
+  bare?: boolean;
+  /** under the body, hidden with it while editing */
+  footer?: ReactNode;
+}
+
+/**
+ * One piece of the conversation with its author: the body is rendered
+ * markdown, edited in place through `toEdit`, and its task checkboxes save the
+ * edited source the same way.
+ */
+export function CommentCard({
+  editing,
+  author,
+  action,
+  verdict,
+  createdAt,
+  lastEditedAt,
+  url,
+  body,
+  emptyText,
+  canEdit,
+  toEdit,
+  reactable,
+  bare = false,
+  footer,
+}: CommentCardProps): ReactNode {
+  const sendEdit = useSendEdit(editing);
+  const draftKey = `edit:${reactable.id}`;
+  // an edit left unsent on an earlier visit opens again on its draft
+  const hasDraft = useHasDraftText(draftKey);
+  const [editorOpen, setEditorOpen] = useState(hasDraft);
+  const empty = body.trim() === "";
+
+  const content = (
+    <>
+      <CardHeader
+        author={author}
+        verdict={verdict}
+        action={action}
+        createdAt={createdAt}
+        url={url}
+        edited={
+          <EditedLink
+            pullRequest={editing.pullRequest}
+            subjectId={reactable.id}
+            lastEditedAt={lastEditedAt}
+            url={url}
+          />
+        }
+        onEdit={
+          canEdit && !editorOpen
+            ? () => {
+                setEditorOpen(true);
+              }
+            : null
+        }
+      />
+      {editorOpen ? (
+        <BodyEditor
+          editing={editing}
+          draftKey={draftKey}
+          initial={body}
+          ariaLabel="Edit"
+          toEdit={toEdit}
+          onDone={() => {
+            setEditorOpen(false);
+          }}
+        />
+      ) : null}
+      {!editorOpen && !empty ? (
+        <MarkdownText
+          github
+          text={body}
+          onTaskToggle={
+            canEdit
+              ? async (nextText) => {
+                  await sendEdit(toEdit(nextText));
+                }
+              : undefined
+          }
+        />
+      ) : null}
+      {!editorOpen && empty && emptyText !== undefined ? (
+        <Text className="text-sm text-muted">{emptyText}</Text>
+      ) : null}
+      {editorOpen ? null : footer}
+      {editorOpen ? null : (
+        <PullRequestReactions
+          subject={reactable}
+          onEdit={(edit) => sendEdit(edit)}
+        />
+      )}
+    </>
+  );
+
+  if (bare) return <View className="min-w-0 gap-xs">{content}</View>;
+  return <Box className="surface min-w-0 gap-sm p-m">{content}</Box>;
+}