@reviewflow/ui 0.0.0-stage → 6.21.0

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

@@ -0,0 +1,147 @@
+import type { PullRequestDetail, PullRequestEdit } from "@reviewflow/sdk";
+import { ActionButton, Button, Text, View } from "alouette";
+import type { ReactNode } from "react";
+import { usePullRequestDataSource } from "../dataSource.ts";
+import { useDraftText } from "../services/PullRequestDraftsProvider.tsx";
+import { errorToMessage } from "../services/errorToMessage.ts";
+import { PullRequestMarkdownInput } from "./pull-request-markdown-input.tsx";
+
+/** What every gesture of the conversation needs to write and to re-read. */
+export interface ConversationEditing {
+  pullRequest: PullRequestDetail;
+  /** reads again the parts of the pull request the change made stale */
+  onEdited: (edit: PullRequestEdit) => Promise<void>;
+}
+
+/** Writes the edit through the data source, then reads again what it made stale. */
+export const useSendEdit = ({
+  pullRequest,
+  onEdited,
+}: ConversationEditing): ((edit: PullRequestEdit) => Promise<void>) => {
+  const { edit: writeEdit } = usePullRequestDataSource();
+  return async (edit) => {
+    await writeEdit(pullRequest, edit);
+    await onEdited(edit);
+  };
+};
+
+interface BodyEditorProps {
+  editing: ConversationEditing;
+  /** where the edit in progress is kept, see `useDraftText` */
+  draftKey: string;
+  initial: string;
+  ariaLabel: string;
+  toEdit: (body: string) => PullRequestEdit;
+  onDone: () => void;
+}
+
+/** The inline editor of a description or a comment: the source, with its preview. */
+export function BodyEditor({
+  editing,
+  draftKey,
+  initial,
+  ariaLabel,
+  toEdit,
+  onDone,
+}: BodyEditorProps): ReactNode {
+  const sendEdit = useSendEdit(editing);
+  const draft = useDraftText(draftKey, initial);
+  return (
+    <View className="gap-xs">
+      <PullRequestMarkdownInput
+        aria-label={ariaLabel}
+        value={draft.text}
+        onChange={draft.setText}
+      />
+      <View className="flex-row flex-wrap items-center justify-end gap-xs">
+        <Button
+          text="Cancel"
+          accent="neutral"
+          variant="soft"
+          size="sm"
+          onPress={() => {
+            draft.discard();
+            onDone();
+          }}
+        />
+        <ActionButton
+          text="Save"
+          accent="brand"
+          variant="tonal"
+          size="sm"
+          errorToMessage={errorToMessage}
+          onPress={async () => {
+            const sent = draft.text;
+            await sendEdit(toEdit(sent));
+            draft.discard(sent);
+            onDone();
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+export interface ComposerDraft {
+  body: string;
+  clear: () => void;
+}
+
+interface ComposerProps {
+  editing: ConversationEditing;
+  /** where the text being written is kept, see `useDraftText` */
+  draftKey: string;
+  title?: string;
+  ariaLabel: string;
+  buttonText: string;
+  toEdit: (body: string) => PullRequestEdit;
+  /** before the submit button, e.g. Resolve under a reply */
+  extraActions?: (draft: ComposerDraft) => ReactNode;
+}
+
+/** A new comment or a reply: cleared once GitHub took it, kept when it refused. */
+export function Composer({
+  editing,
+  draftKey,
+  title,
+  ariaLabel,
+  buttonText,
+  toEdit,
+  extraActions,
+}: ComposerProps): ReactNode {
+  const sendEdit = useSendEdit(editing);
+  const draft = useDraftText(draftKey);
+  return (
+    <View className="gap-xs">
+      {title === undefined ? null : (
+        <Text className="font-body-bold text-sm">{title}</Text>
+      )}
+      <PullRequestMarkdownInput
+        aria-label={ariaLabel}
+        value={draft.text}
+        onChange={draft.setText}
+      />
+      <View className="flex-row flex-wrap items-center justify-end gap-xs">
+        {extraActions?.({
+          body: draft.text,
+          clear: () => {
+            draft.discard();
+          },
+        })}
+        <ActionButton
+          text={buttonText}
+          accent="brand"
+          variant="tonal"
+          size="sm"
+          disabled={draft.text.trim() === ""}
+          errorToMessage={errorToMessage}
+          onPress={async () => {
+            const sent = draft.text;
+            await sendEdit(toEdit(sent));
+            draft.discard(sent);
+          }}
+        />
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,267 @@
+import type { PullRequestEvent } from "@reviewflow/sdk";
+import type { IconProps } from "alouette";
+import { Code, Icon, Text, View } from "alouette";
+import { ArrowsClockwiseRegularIcon } from "alouette-icons/phosphor-icons/ArrowsClockwise";
+import { CheckCircleRegularIcon } from "alouette-icons/phosphor-icons/CheckCircle";
+import { CircleDashedRegularIcon } from "alouette-icons/phosphor-icons/CircleDashed";
+import { EyeRegularIcon } from "alouette-icons/phosphor-icons/Eye";
+import { FileDashedRegularIcon } from "alouette-icons/phosphor-icons/FileDashed";
+import { GitBranchRegularIcon } from "alouette-icons/phosphor-icons/GitBranch";
+import { GitCommitRegularIcon } from "alouette-icons/phosphor-icons/GitCommit";
+import { GitMergeRegularIcon } from "alouette-icons/phosphor-icons/GitMerge";
+import { LightningRegularIcon } from "alouette-icons/phosphor-icons/Lightning";
+import { PencilSimpleRegularIcon } from "alouette-icons/phosphor-icons/PencilSimple";
+import { ProhibitRegularIcon } from "alouette-icons/phosphor-icons/Prohibit";
+import { TagRegularIcon } from "alouette-icons/phosphor-icons/Tag";
+import { UserMinusRegularIcon } from "alouette-icons/phosphor-icons/UserMinus";
+import { UserPlusRegularIcon } from "alouette-icons/phosphor-icons/UserPlus";
+import { XCircleRegularIcon } from "alouette-icons/phosphor-icons/XCircle";
+import type { ReactNode } from "react";
+import { formatDataAge } from "../services/formatDataAge.ts";
+import { LabelPill } from "./label-pill.tsx";
+
+interface EventRowProps {
+  icon: IconProps["icon"];
+  event: PullRequestEvent;
+  /** the words before the subject */
+  text: string;
+  /** the thing the action names; a string is set bold */
+  subject?: ReactNode;
+  /** the words after it */
+  after?: string;
+  /** a second thing after `after`, e.g. the new base branch */
+  children?: ReactNode;
+}
+
+function EventRow({
+  icon,
+  event,
+  text,
+  subject,
+  after,
+  children,
+}: EventRowProps): ReactNode {
+  return (
+    <View className="min-w-0 flex-row flex-wrap items-center gap-xs pl-xs">
+      <Icon icon={icon} size={16} className="text-muted" />
+      <Text className="text-sm font-body-bold">
+        {event.actor?.login ?? "ghost"}
+      </Text>
+      <Text className="text-sm text-muted">{text}</Text>
+      {typeof subject === "string" ? (
+        <Text className="text-sm font-body-bold">{subject}</Text>
+      ) : (
+        subject
+      )}
+      {after === undefined ? null : (
+        <Text className="text-sm text-muted">{after}</Text>
+      )}
+      {children}
+      <Text className="text-sm text-muted">
+        {formatDataAge(event.createdAt)}
+      </Text>
+    </View>
+  );
+}
+
+/** Events about the branches and the pull request's own state. */
+function BranchEventLine({ event }: { event: PullRequestEvent }): ReactNode {
+  const { action, subject, detail } = event;
+  if (action === "baseRefChanged") {
+    return (
+      <EventRow
+        icon={<GitBranchRegularIcon />}
+        event={event}
+        text="changed the base branch from"
+        subject={<Code>{detail ?? ""}</Code>}
+        after="to"
+      >
+        <Code>{subject ?? ""}</Code>
+      </EventRow>
+    );
+  }
+  if (action === "headRefForcePushed") {
+    return (
+      <EventRow
+        icon={<ArrowsClockwiseRegularIcon />}
+        event={event}
+        text="force-pushed the head branch"
+        subject={detail === null ? undefined : <Code>{detail}</Code>}
+      />
+    );
+  }
+  if (action === "merged") {
+    return (
+      <EventRow
+        icon={<GitMergeRegularIcon />}
+        event={event}
+        text="merged this pull request"
+        subject={subject ?? undefined}
+      />
+    );
+  }
+  if (action === "closed") {
+    return (
+      <EventRow
+        icon={<XCircleRegularIcon />}
+        event={event}
+        text="closed this pull request"
+      />
+    );
+  }
+  if (action === "reopened") {
+    return (
+      <EventRow
+        icon={<CircleDashedRegularIcon />}
+        event={event}
+        text="reopened this pull request"
+      />
+    );
+  }
+  if (action === "reviewDismissed") {
+    return (
+      <EventRow
+        icon={<ProhibitRegularIcon />}
+        event={event}
+        text="dismissed a review"
+      />
+    );
+  }
+  if (action === "autoMergeEnabled" || action === "autoMergeDisabled") {
+    return (
+      <EventRow
+        icon={<LightningRegularIcon />}
+        event={event}
+        text={
+          action === "autoMergeEnabled"
+            ? "enabled auto-merge"
+            : "disabled auto-merge"
+        }
+      />
+    );
+  }
+  return (
+    <EventRow
+      icon={<GitCommitRegularIcon />}
+      event={event}
+      text="added a commit"
+      subject={subject ?? undefined}
+    />
+  );
+}
+
+/** One event of the pull request, in GitHub's wording. */
+export function EventLine({ event }: { event: PullRequestEvent }): ReactNode {
+  const { action, subject, detail, label } = event;
+  if (action === "reviewRequested") {
+    return (
+      <EventRow
+        icon={<EyeRegularIcon />}
+        event={event}
+        text="requested a review from"
+        subject={subject ?? undefined}
+      />
+    );
+  }
+  if (action === "reviewRequestRemoved") {
+    return (
+      <EventRow
+        icon={<EyeRegularIcon />}
+        event={event}
+        text="removed the review request for"
+        subject={subject ?? undefined}
+      />
+    );
+  }
+  if (action === "readyForReview") {
+    return (
+      <EventRow
+        icon={<CheckCircleRegularIcon />}
+        event={event}
+        text="marked this pull request as ready for review"
+      />
+    );
+  }
+  if (action === "convertedToDraft") {
+    return (
+      <EventRow
+        icon={<FileDashedRegularIcon />}
+        event={event}
+        text="marked this pull request as draft"
+      />
+    );
+  }
+  if (action === "labeled" || action === "unlabeled") {
+    return (
+      <EventRow
+        icon={<TagRegularIcon />}
+        event={event}
+        text={action === "labeled" ? "added the" : "removed the"}
+        subject={
+          label === null ? (subject ?? undefined) : <LabelPill label={label} />
+        }
+        after="label"
+      />
+    );
+  }
+  if (action === "assigned" || action === "unassigned") {
+    return (
+      <EventRow
+        icon={
+          action === "assigned" ? (
+            <UserPlusRegularIcon />
+          ) : (
+            <UserMinusRegularIcon />
+          )
+        }
+        event={event}
+        text={action}
+        subject={subject ?? undefined}
+      />
+    );
+  }
+  if (action === "renamed") {
+    return (
+      <EventRow
+        icon={<PencilSimpleRegularIcon />}
+        event={event}
+        text="changed the title"
+        subject={`${detail ?? ""} → ${subject ?? ""}`}
+      />
+    );
+  }
+  return <BranchEventLine event={event} />;
+}
+
+/** Consecutive commits of one actor: a line for the push, then each headline. */
+export function CommitsLine({
+  events,
+}: {
+  events: PullRequestEvent[];
+}): ReactNode {
+  const [first] = events;
+  if (first === undefined) return null;
+  const count = events.length;
+  return (
+    <View className="min-w-0 gap-xxs">
+      <EventRow
+        icon={<GitCommitRegularIcon />}
+        event={first}
+        text="added"
+        subject={String(count)}
+        after={count === 1 ? "commit" : "commits"}
+      />
+      {events.map((event, index) => (
+        <View
+          key={`${event.detail ?? ""}:${String(index)}`}
+          className="min-w-0 flex-row items-center gap-xs pl-xl"
+        >
+          <Text className="min-w-0 shrink text-sm" numberOfLines={1}>
+            {event.subject ?? ""}
+          </Text>
+          {event.detail === null ? null : <Code>{event.detail}</Code>}
+        </View>
+      ))}
+    </View>
+  );
+}

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

@@ -0,0 +1,28 @@
+import type { PullRequestPerson } from "@reviewflow/sdk";
+import { Avatar } from "alouette";
+import type { ReactNode } from "react";
+import { Image, View } from "react-native";
+
+/**
+ * alouette's Avatar draws initials only, so GitHub's picture is laid over it:
+ * while it loads, or when it fails, the initials are what shows.
+ */
+export function PersonAvatar({
+  person,
+}: {
+  person: PullRequestPerson | null;
+}): ReactNode {
+  const login = person?.login ?? "ghost";
+  return (
+    <View className="size-[28px] shrink-0">
+      <Avatar size="sm" name={login} />
+      {person?.avatarUrl ? (
+        <Image
+          source={{ uri: person.avatarUrl }}
+          accessibilityLabel={login}
+          className="absolute inset-0 size-[28px] rounded-full"
+        />
+      ) : null}
+    </View>
+  );
+}

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

@@ -0,0 +1,158 @@
+import type { PullRequestThread } from "@reviewflow/sdk";
+import { suggestionOriginalLines } from "@reviewflow/sdk";
+import {
+  ActionButton,
+  Badge,
+  Box,
+  Button,
+  CodeBlock,
+  ExternalLinkText,
+  Text,
+  View,
+} from "alouette";
+import type { ReactNode } from "react";
+import { useMemo, useState } from "react";
+import { errorToMessage } from "../services/errorToMessage.ts";
+import { SuggestionOriginalContext } from "./markdown-suggestion.tsx";
+import { CommentCard } from "./pull-request-conversation-card.tsx";
+import type { ConversationEditing } from "./pull-request-conversation-edit.tsx";
+import { Composer, useSendEdit } from "./pull-request-conversation-edit.tsx";
+import { SuggestionActions } from "./pull-request-suggestion-actions.tsx";
+
+/** The last lines of the hunk: the ones the comment was written under. */
+const hunkTail = (diffHunk: string): string =>
+  diffHunk
+    .split("\n")
+    .filter((line) => !line.startsWith("@@"))
+    .slice(-4)
+    .join("\n");
+
+const lineRange = (thread: PullRequestThread): string => {
+  const line = thread.line ?? thread.originalLine;
+  if (line === null) return "";
+  if (thread.startLine !== null && thread.startLine !== line) {
+    return `:${String(thread.startLine)}-${String(line)}`;
+  }
+  return `:${String(line)}`;
+};
+
+interface ThreadProps {
+  editing: ConversationEditing;
+  thread: PullRequestThread;
+}
+
+/** Resolved threads start folded, as on GitHub: they are history, not a request. */
+export function Thread({ editing, thread }: ThreadProps): ReactNode {
+  const sendEdit = useSendEdit(editing);
+  const [open, setOpen] = useState(!thread.resolved);
+  const unlisted = thread.commentsTotal - thread.comments.length;
+  const first = thread.comments[0];
+  const last = thread.comments.at(-1);
+  const original = useMemo(() => suggestionOriginalLines(thread), [thread]);
+
+  const canToggle = thread.resolved
+    ? thread.viewerCanUnresolve
+    : thread.viewerCanResolve;
+  const toggleResolved = canToggle ? (
+    <ActionButton
+      text={thread.resolved ? "Unresolve conversation" : "Resolve conversation"}
+      accent="neutral"
+      variant="tonal"
+      size="sm"
+      errorToMessage={errorToMessage}
+      onPress={async () => {
+        await sendEdit({
+          kind: "resolveThread",
+          threadId: thread.id,
+          resolved: !thread.resolved,
+        });
+      }}
+    />
+  ) : null;
+
+  return (
+    <Box className="surface min-w-0 gap-sm p-m">
+      <View className="flex-row flex-wrap items-center gap-xs">
+        <Text
+          className="min-w-0 shrink text-sm font-body-bold"
+          numberOfLines={1}
+        >
+          {thread.path + lineRange(thread)}
+        </Text>
+        {thread.outdated ? (
+          <Badge accent="warning" size="sm">
+            outdated
+          </Badge>
+        ) : null}
+        {thread.resolved ? (
+          <Badge accent="success" size="sm">
+            resolved
+          </Badge>
+        ) : null}
+        {thread.resolved ? (
+          <Button
+            text={open ? "Hide" : "Show"}
+            accent="neutral"
+            variant="soft"
+            size="sm"
+            onPress={() => {
+              setOpen(!open);
+            }}
+          />
+        ) : null}
+      </View>
+      {open ? (
+        <View className="gap-m">
+          <CodeBlock size="sm">{hunkTail(thread.diffHunk)}</CodeBlock>
+          <SuggestionOriginalContext value={original}>
+            {thread.comments.map((comment) => (
+              <CommentCard
+                key={comment.id}
+                bare
+                editing={editing}
+                author={comment.author}
+                action="commented"
+                createdAt={comment.createdAt}
+                lastEditedAt={comment.lastEditedAt}
+                url={comment.url}
+                body={comment.body}
+                canEdit={comment.viewerCanUpdate}
+                reactable={comment}
+                toEdit={(body) => ({
+                  kind: "editComment",
+                  target: "reviewComment",
+                  databaseId: comment.databaseId,
+                  body,
+                })}
+                footer={<SuggestionActions thread={thread} comment={comment} />}
+              />
+            ))}
+          </SuggestionOriginalContext>
+          {unlisted > 0 && last !== undefined ? (
+            <ExternalLinkText
+              size="sm"
+              href={last.url}
+              text={`${String(unlisted)} more on GitHub`}
+            />
+          ) : null}
+          {thread.viewerCanReply && first !== undefined ? (
+            <Composer
+              editing={editing}
+              draftKey={`reply:${thread.id}`}
+              ariaLabel="Reply"
+              buttonText="Reply"
+              toEdit={(body) => ({
+                kind: "reply",
+                inReplyTo: first.databaseId,
+                body,
+              })}
+              extraActions={() => toggleResolved}
+            />
+          ) : (
+            toggleResolved
+          )}
+        </View>
+      ) : null}
+    </Box>
+  );
+}