@reviewflow/ui 0.0.0-stage → 6.22.0

package/src/components/pull-request-part-notice.tsx

@@ -0,0 +1,82 @@
+import {
+  IndeterminateCircularProgress,
+  IndeterminateLinearProgress,
+  Text,
+  View,
+  WarningMessage,
+} from "alouette";
+import type { ReactNode } from "react";
+import { createContext, use, useCallback, useEffect, useState } from "react";
+
+/** Marks one part as being read; returns how to unmark it. */
+type ReportReading = () => () => void;
+
+/**
+ * Where the {@link PullRequestPartReading} below report to, for a single
+ * progress bar at the top of the screen instead of one per tab.
+ */
+export const PartReadingScope = createContext<ReportReading | null>(null);
+
+/** How many parts below a {@link PartReadingScope} given `report` are being read. */
+export const usePartReadingCount = (): {
+  count: number;
+  report: ReportReading;
+} => {
+  const [count, setCount] = useState(0);
+  const report = useCallback(() => {
+    setCount((n) => n + 1);
+    return () => {
+      setCount((n) => n - 1);
+    };
+  }, []);
+  return { count, report };
+};
+
+interface PullRequestPartPendingProps {
+  error: string | null;
+  /** what is read, as the sentence names it: "the timeline", "the checks" */
+  what: string;
+}
+
+/** In place of a part GitHub has not answered yet: its failure, else the wait. */
+export function PullRequestPartPending({
+  error,
+  what,
+}: PullRequestPartPendingProps): ReactNode {
+  if (error !== null) return <WarningMessage>{error}</WarningMessage>;
+  return (
+    <View className="flex-row items-center gap-xs py-sm">
+      <IndeterminateCircularProgress loading size="xs" />
+      <Text className="text-sm text-muted">{`Reading ${what} from GitHub…`}</Text>
+    </View>
+  );
+}
+
+/**
+ * Above a part already shown — the daemon's last read, or an answer being
+ * read again after an edit — while GitHub is read. Inside the screen, it is
+ * shown by the screen's bar instead.
+ */
+export function PullRequestPartReading({
+  reading,
+}: {
+  reading: boolean;
+}): ReactNode {
+  const report = use(PartReadingScope);
+  useEffect(() => {
+    if (!reading || report === null) return undefined;
+    return report();
+  }, [reading, report]);
+  if (report !== null) return null;
+  return <IndeterminateLinearProgress loading={reading} size="xs" />;
+}
+
+/** A failed read, above the last answer, which stays. */
+export function PullRequestPartError({
+  error,
+}: {
+  error: string | null;
+}): ReactNode {
+  if (error === null) return null;
+  return <WarningMessage>{error}</WarningMessage>;
+}

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

@@ -0,0 +1,178 @@
+import { pullRequestReactionContents } from "@reviewflow/sdk";
+import type {
+  PullRequestEdit,
+  PullRequestReactable,
+  PullRequestReaction,
+  PullRequestReactionContent,
+} from "@reviewflow/sdk";
+import {
+  ActionButton,
+  ErrorMessage,
+  IconButton,
+  Menu,
+  MenuItem,
+  View,
+} from "alouette";
+import { SmileyRegularIcon } from "alouette-icons/phosphor-icons/Smiley";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { errorToMessage } from "../services/errorToMessage.ts";
+
+const reactionEmoji: Record<PullRequestReactionContent, string> = {
+  thumbsUp: "👍",
+  thumbsDown: "👎",
+  laugh: "😄",
+  hooray: "🎉",
+  confused: "😕",
+  heart: "❤️",
+  rocket: "🚀",
+  eyes: "👀",
+};
+
+/** GitHub's own names, the ones its picker shows. */
+const reactionName: Record<PullRequestReactionContent, string> = {
+  thumbsUp: "+1",
+  thumbsDown: "-1",
+  laugh: "laugh",
+  hooray: "hooray",
+  confused: "confused",
+  heart: "heart",
+  rocket: "rocket",
+  eyes: "eyes",
+};
+
+type ToggleReaction = (
+  content: PullRequestReactionContent,
+  reacted: boolean,
+) => Promise<void>;
+
+interface ReactionButtonProps {
+  reaction: PullRequestReaction;
+  viewerCanReact: boolean;
+  toggle: ToggleReaction;
+}
+
+function ReactionButton({
+  reaction,
+  viewerCanReact,
+  toggle,
+}: ReactionButtonProps): ReactNode {
+  const { content, count, viewerHasReacted } = reaction;
+  const people = count === 1 ? "1 person" : `${String(count)} people`;
+  return (
+    <ActionButton
+      text={`${reactionEmoji[content]} ${String(count)}`}
+      aria-label={`${reactionName[content]}: ${people}${viewerHasReacted ? ", you included" : ""}`}
+      accent={viewerHasReacted ? "brand" : "neutral"}
+      variant="tonal"
+      size="sm"
+      disabledReason={
+        viewerCanReact ? null : "GitHub does not let you react here"
+      }
+      errorMessageVariant="flat"
+      errorToMessage={errorToMessage}
+      onPress={async () => {
+        await toggle(content, !viewerHasReacted);
+      }}
+    />
+  );
+}
+
+interface ReactionPickerProps {
+  reactions: PullRequestReaction[];
+  toggle: ToggleReaction;
+  onError: (message: string | null) => void;
+}
+
+function ReactionPicker({
+  reactions,
+  toggle,
+  onError,
+}: ReactionPickerProps): ReactNode {
+  return (
+    <Menu
+      label="Reactions"
+      // The trigger ends a row that starts at the card's edge: hanging the
+      // panel from its end edge would push it off the left of the screen.
+      align="start"
+      render={(triggerProps) => (
+        <IconButton
+          icon={<SmileyRegularIcon />}
+          aria-label="Add a reaction"
+          accent="neutral"
+          variant="soft"
+          size="sm"
+          {...triggerProps}
+        />
+      )}
+    >
+      {pullRequestReactionContents.map((content) => {
+        const reacted = reactions.some(
+          (reaction) =>
+            reaction.content === content && reaction.viewerHasReacted,
+        );
+        return (
+          <MenuItem
+            key={content}
+            label={`${reactionEmoji[content]} ${reactionName[content]}`}
+            description={reacted ? "Yours: press to remove it" : undefined}
+            accent={reacted ? "brand" : undefined}
+            onPress={() => {
+              onError(null);
+              toggle(content, !reacted).catch((error: unknown) => {
+                onError(errorToMessage(error));
+              });
+            }}
+          />
+        );
+      })}
+    </Menu>
+  );
+}
+
+interface PullRequestReactionsProps {
+  subject: PullRequestReactable;
+  onEdit: (edit: PullRequestEdit) => Promise<void>;
+}
+
+/**
+ * GitHub's reactions under a description, a comment or a review: a count per
+ * emoji someone gave, pressed to add or take back the viewer's own, and the
+ * picker for the others. Written on the press, then read back from GitHub.
+ */
+export function PullRequestReactions({
+  subject,
+  onEdit,
+}: PullRequestReactionsProps): ReactNode {
+  const [pickerError, setPickerError] = useState<string | null>(null);
+  const { id, reactions, viewerCanReact } = subject;
+  if (reactions.length === 0 && !viewerCanReact) return null;
+
+  const toggle: ToggleReaction = (content, reacted) =>
+    onEdit({ kind: "reaction", subjectId: id, content, reacted });
+
+  return (
+    <View className="gap-xs">
+      <View className="flex-row flex-wrap items-center gap-xs">
+        {reactions.map((reaction) => (
+          <ReactionButton
+            key={reaction.content}
+            reaction={reaction}
+            viewerCanReact={viewerCanReact}
+            toggle={toggle}
+          />
+        ))}
+        {viewerCanReact ? (
+          <ReactionPicker
+            reactions={reactions}
+            toggle={toggle}
+            onError={setPickerError}
+          />
+        ) : null}
+      </View>
+      {pickerError === null ? null : (
+        <ErrorMessage variant="flat">{pickerError}</ErrorMessage>
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,164 @@
+import type {
+  PullRequestCheck,
+  PullRequestDetail,
+  PullRequestDetailResponse,
+  PullRequestEdit,
+  PullRequestRef,
+  ReviewflowPrDetail,
+  ReviewflowPrResponse,
+} from "@reviewflow/sdk";
+import { checksFromReviewflow } from "@reviewflow/sdk";
+import {
+  Disclosure,
+  ErrorMessage,
+  IndeterminateCircularProgress,
+  Text,
+  View,
+  WarningMessage,
+} from "alouette";
+import type { ReactNode } from "react";
+import type { PullRequestReadState } from "../dataSource.ts";
+import { usePullRequestDataSource } from "../dataSource.ts";
+import { CheckLine } from "./pull-request-checks.tsx";
+import { PullRequestFiles } from "./pull-request-files.tsx";
+import {
+  PullRequestDescription,
+  PullRequestTimelineEntries,
+  conversationCount,
+} from "./pull-request-timeline.tsx";
+
+/** A data source without reviewflow judges no check. */
+const useNoReviewflowPr = (
+  _ref: PullRequestRef,
+): PullRequestReadState<ReviewflowPrResponse> | null => null;
+
+const countText = (count: number, what: string): string =>
+  `${String(count)} ${what}`;
+
+const blockingSummary = (failed: number, pending: number): string => {
+  if (failed === 0) return countText(pending, "pending");
+  if (pending === 0) return countText(failed, "failing");
+  return `${countText(failed, "failing")}, ${countText(pending, "pending")}`;
+};
+
+/** reviewflow names its failures; their link and description are its stored runs'. */
+const failedChecks = (
+  { checks }: ReviewflowPrDetail,
+  at: string,
+): PullRequestCheck[] => {
+  const stored =
+    checks.checkRuns === null || checks.statuses === null
+      ? []
+      : checksFromReviewflow(
+          { checkRuns: checks.checkRuns, statuses: checks.statuses },
+          at,
+        ).checks;
+  return checks.failedNames.map(
+    (name) =>
+      stored.find((check) => check.name === name) ?? {
+        name,
+        outcome: "failed",
+        running: false,
+        description: null,
+        url: null,
+      },
+  );
+};
+
+/**
+ * reviewflow's verdict on the checks, not GitHub's raw list: it leaves out
+ * the checks allowed to fail, the jobs on hold and its own check, which waits
+ * on this very review. Said, not enforced.
+ */
+function ChecksBlocker({
+  pullRequest,
+}: {
+  pullRequest: PullRequestDetail;
+}): ReactNode {
+  const dataSource = usePullRequestDataSource();
+  const read = (dataSource.useReviewflowPr ?? useNoReviewflowPr)(pullRequest);
+  if (read === null) return null;
+  if (read.value === null) {
+    if (read.error !== null) {
+      return (
+        <WarningMessage>
+          {`reviewflow could not be read: ${read.error}`}
+        </WarningMessage>
+      );
+    }
+    return (
+      <View className="flex-row items-center gap-xs">
+        <IndeterminateCircularProgress loading size="xs" />
+        <Text className="text-sm text-muted">
+          Reading the checks from reviewflow…
+        </Text>
+      </View>
+    );
+  }
+  const { pr } = read.value;
+  if (pr === null) {
+    return (
+      <WarningMessage>
+        reviewflow holds no copy of this pull request: the checks are not judged
+        here.
+      </WarningMessage>
+    );
+  }
+  const { conclusion, running } = pr.checks;
+  if (conclusion !== "failed" && conclusion !== "inProgress") return null;
+  const failed = failedChecks(pr, pr.updatedAt);
+  return (
+    <ErrorMessage>
+      <View className="gap-xs">
+        <Text className="font-body-bold">
+          {`The checks block this review: ${blockingSummary(failed.length, running)}.`}
+        </Text>
+        {failed.map((check) => (
+          <CheckLine key={check.name} check={check} />
+        ))}
+      </View>
+    </ErrorMessage>
+  );
+}
+
+const useConversationLabel = (pullRequest: PullRequestDetail): string => {
+  const { value } = usePullRequestDataSource().usePart(pullRequest, "timeline");
+  return value === null
+    ? "Comments and reviews"
+    : `Comments and reviews (${String(conversationCount(value.timeline))})`;
+};
+
+export interface PullRequestReviewProps {
+  detail: PullRequestDetailResponse;
+  /** reads the pull request again once GitHub took a change */
+  onEdited: (edit: PullRequestEdit) => Promise<void>;
+}
+
+/**
+ * The pull request as a reviewer reads it, top to bottom: what the checks
+ * still say against it, the description, the conversation folded away, then
+ * the files to review.
+ */
+export function PullRequestReview({
+  detail,
+  onEdited,
+}: PullRequestReviewProps): ReactNode {
+  const { pullRequest } = detail;
+  const conversationLabel = useConversationLabel(pullRequest);
+  return (
+    <View className="gap-l">
+      <ChecksBlocker pullRequest={pullRequest} />
+      <PullRequestDescription detail={detail} onEdited={onEdited} />
+      <Disclosure label={conversationLabel}>
+        <View className="gap-m">
+          <PullRequestTimelineEntries
+            conversationOnly
+            detail={detail}
+            onEdited={onEdited}
+          />
+        </View>
+      </Disclosure>
+      <PullRequestFiles detail={detail} onEdited={onEdited} />
+    </View>
+  );
+}

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

@@ -0,0 +1,273 @@
+import type {
+  PullRequestRef,
+  PullRequestRevision,
+  PullRequestTextLine,
+} from "@reviewflow/sdk";
+import {
+  Box,
+  Button,
+  ExternalLinkText,
+  LinkText,
+  Modal,
+  Text,
+  Tooltip,
+  View,
+} from "alouette";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { usePullRequestDataSource } from "../dataSource.ts";
+import { formatDataAge } from "../services/formatDataAge.ts";
+import { linkInRow } from "./link-in-row.ts";
+import { MarkdownText } from "./markdown-text.tsx";
+import { PersonAvatar } from "./pull-request-conversation-person.tsx";
+import { PullRequestPartPending } from "./pull-request-part-notice.tsx";
+
+/** Unchanged lines kept on each side of a change; the rest fold into a count. */
+const contextKept = 3;
+
+type ChangeRun =
+  | { kind: "folded"; count: number; from: number }
+  | { kind: PullRequestTextLine["kind"]; text: string; from: number };
+
+/** The marker is in the text, so the meaning survives without the colour. */
+const linePrefix = (kind: PullRequestTextLine["kind"]): string => {
+  if (kind === "added") return "+ ";
+  if (kind === "removed") return "- ";
+  return "  ";
+};
+
+const toRuns = (changes: PullRequestTextLine[]): ChangeRun[] => {
+  const groups: {
+    kind: PullRequestTextLine["kind"];
+    lines: string[];
+    from: number;
+  }[] = [];
+  for (const [at, line] of changes.entries()) {
+    const open = groups.at(-1);
+    if (open?.kind === line.kind) {
+      open.lines.push(line.text);
+      continue;
+    }
+    groups.push({ kind: line.kind, lines: [line.text], from: at });
+  }
+
+  const textOf = (kind: PullRequestTextLine["kind"], lines: string[]): string =>
+    lines.map((line) => linePrefix(kind) + line).join("\n");
+
+  return groups.flatMap((group, index): ChangeRun[] => {
+    const { kind, lines, from } = group;
+    if (kind !== "context") return [{ kind, text: textOf(kind, lines), from }];
+    const head = index === 0 ? 0 : contextKept;
+    const tail = index === groups.length - 1 ? 0 : contextKept;
+    if (lines.length <= head + tail + 1) {
+      return [{ kind, text: textOf(kind, lines), from }];
+    }
+    const runs: ChangeRun[] = [];
+    if (head > 0) {
+      runs.push({ kind, text: textOf(kind, lines.slice(0, head)), from });
+    }
+    runs.push({
+      kind: "folded",
+      count: lines.length - head - tail,
+      from: from + head,
+    });
+    if (tail > 0) {
+      runs.push({
+        kind,
+        text: textOf(kind, lines.slice(-tail)),
+        from: from + lines.length - tail,
+      });
+    }
+    return runs;
+  });
+};
+
+function ChangeRunText({ run }: { run: ChangeRun }): ReactNode {
+  if (run.kind === "folded") {
+    return (
+      <Text className="py-xxs text-xs text-muted">
+        {`⋯ ${String(run.count)} unchanged ${run.count === 1 ? "line" : "lines"}`}
+      </Text>
+    );
+  }
+  if (run.kind === "added") {
+    return (
+      <Text
+        accent="success"
+        className="select-auto font-mono text-xs text-accent web:whitespace-pre-wrap"
+      >
+        {run.text}
+      </Text>
+    );
+  }
+  if (run.kind === "removed") {
+    return (
+      <Text
+        accent="danger"
+        className="select-auto font-mono text-xs text-accent web:whitespace-pre-wrap"
+      >
+        {run.text}
+      </Text>
+    );
+  }
+  return (
+    <Text className="select-auto font-mono text-xs text-sharp web:whitespace-pre-wrap">
+      {run.text}
+    </Text>
+  );
+}
+
+/** Wrapped rather than scrolled: a description is prose, one paragraph a line. */
+function ChangesBlock({
+  changes,
+}: {
+  changes: PullRequestTextLine[];
+}): ReactNode {
+  return (
+    <Box className="surface surface-sm lowered">
+      {toRuns(changes).map((run) => (
+        <ChangeRunText key={run.from} run={run} />
+      ))}
+    </Box>
+  );
+}
+
+function RevisionContent({
+  revision,
+}: {
+  revision: PullRequestRevision;
+}): ReactNode {
+  if (revision.body === null) {
+    return (
+      <Text className="text-sm text-muted">
+        {`Deleted from the history by ${revision.deletedBy ?? "ghost"}.`}
+      </Text>
+    );
+  }
+  if (revision.changes !== null) {
+    return <ChangesBlock changes={revision.changes} />;
+  }
+  if (revision.body.trim() === "") {
+    return <Text className="text-sm text-muted">Empty.</Text>;
+  }
+  return <MarkdownText github text={revision.body} />;
+}
+
+function RevisionView({
+  revision,
+}: {
+  revision: PullRequestRevision;
+}): ReactNode {
+  return (
+    <View className="gap-xs">
+      <View className="flex-row flex-wrap items-center gap-xs">
+        <PersonAvatar person={revision.editor} />
+        <Text className="text-sm font-body-bold">
+          {revision.editor?.login ?? "ghost"}
+        </Text>
+        <Text className="text-sm text-muted">
+          {`${revision.original ? "created" : "edited"} ${formatDataAge(revision.editedAt)}`}
+        </Text>
+      </View>
+      <RevisionContent revision={revision} />
+    </View>
+  );
+}
+
+interface RevisionListProps {
+  pullRequest: PullRequestRef;
+  subjectId: string;
+  url: string;
+}
+
+function RevisionList({
+  pullRequest,
+  subjectId,
+  url,
+}: RevisionListProps): ReactNode {
+  const { value: revisions, error } = usePullRequestDataSource().useRevisions(
+    pullRequest,
+    subjectId,
+  );
+  if (revisions === null) {
+    return <PullRequestPartPending error={error} what="the edit history" />;
+  }
+  const unlisted = revisions.revisionsTotal - revisions.revisions.length;
+  return (
+    <View className="gap-l">
+      {revisions.revisions.map((revision, index) => (
+        <RevisionView
+          key={`${revision.editedAt}:${String(index)}`}
+          revision={revision}
+        />
+      ))}
+      {unlisted > 0 ? (
+        <ExternalLinkText
+          size="sm"
+          href={url}
+          text={`${String(unlisted)} older ${unlisted === 1 ? "revision is" : "revisions are"} only on GitHub`}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+interface EditedLinkProps {
+  pullRequest: PullRequestRef;
+  /** the node id of the description, comment or review */
+  subjectId: string;
+  lastEditedAt: string | null;
+  /** where GitHub shows it, for the revisions past the first page */
+  url: string;
+}
+
+/**
+ * GitHub's "edited" beside a date: nothing when the text was never edited,
+ * else a link opening its history, read from GitHub only once opened.
+ */
+export function EditedLink({
+  pullRequest,
+  subjectId,
+  lastEditedAt,
+  url,
+}: EditedLinkProps): ReactNode {
+  const [open, setOpen] = useState(false);
+  if (lastEditedAt === null) return null;
+  const close = (): void => {
+    setOpen(false);
+  };
+  return (
+    <>
+      <Tooltip
+        content={`Edited ${formatDataAge(lastEditedAt)} — show the history`}
+        render={(triggerProps) => (
+          <LinkText
+            {...triggerProps}
+            size="sm"
+            accent="neutral"
+            text="edited"
+            className={linkInRow}
+            onPress={() => {
+              setOpen(true);
+            }}
+          />
+        )}
+      />
+      <Modal
+        visible={open}
+        size="lg"
+        title="Edit history"
+        footer={<Button text="Close" onPress={close} />}
+        onClose={close}
+      >
+        {open ? (
+          <RevisionList
+            pullRequest={pullRequest}
+            subjectId={subjectId}
+            url={url}
+          />
+        ) : null}
+      </Modal>
+    </>
+  );
+}