@reviewflow/ui 0.0.0-stage → 6.22.0

package/src/components/pull-request-actions-merge.tsx

@@ -0,0 +1,341 @@
+import type {
+  PullRequestCommittingMergeMethod,
+  PullRequestDetail,
+  PullRequestMergeCommitMessage,
+  PullRequestMergeMethod,
+  PullRequestMergeState,
+} from "@reviewflow/sdk";
+import {
+  ActionButton,
+  Button,
+  FormItem,
+  InputText,
+  QuestionAlertDialog,
+  SplitButton,
+  SplitButtonOption,
+  Text,
+  TextArea,
+  View,
+} from "alouette";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { errorToMessage } from "../services/errorToMessage.ts";
+import type { PullRequestActionProps } from "./pull-request-actions-review.tsx";
+
+const isMergeMethod = (value: string): value is PullRequestMergeMethod =>
+  value === "merge" || value === "squash" || value === "rebase";
+
+const mergeMethodLabel = (method: PullRequestMergeMethod): string => {
+  if (method === "squash") return "Squash and merge";
+  if (method === "rebase") return "Rebase and merge";
+  return "Create a merge commit";
+};
+
+/** null: GitHub would take the merge. `unstable` is non-required checks failing. */
+const mergeBlockReason = (state: PullRequestMergeState): string | null => {
+  switch (state) {
+    case "clean":
+    case "hasHooks":
+    case "unstable":
+      return null;
+    case "behind":
+      return "The branch is behind its base: update it first.";
+    case "blocked":
+      return "Blocked: required reviews or checks are missing.";
+    case "dirty":
+      return "The branch has conflicts that must be resolved.";
+    case "draft":
+      return "A draft cannot be merged.";
+    case "unknown":
+      return "GitHub is still computing mergeability: refresh in a moment.";
+    default: {
+      const unhandled: never = state;
+      return unhandled;
+    }
+  }
+};
+
+interface MergeButtonProps {
+  mergeMethods: readonly PullRequestMergeMethod[];
+  method: PullRequestMergeMethod | undefined;
+  blockReason: string | null;
+  onMethodChange: (method: PullRequestMergeMethod) => void;
+  onPress: () => void;
+}
+
+/**
+ * `SplitButton` has no `disabledReason`: the Status says why anyway, so only
+ * the single-method `Button` carries it.
+ */
+function MergeButton({
+  mergeMethods,
+  method,
+  blockReason,
+  onMethodChange,
+  onPress,
+}: MergeButtonProps): ReactNode {
+  if (method === undefined || mergeMethods.length < 2) {
+    return (
+      <Button
+        text={method === undefined ? "Merge" : mergeMethodLabel(method)}
+        accent="success"
+        variant="tonal"
+        size="sm"
+        disabledReason={blockReason}
+        onPress={onPress}
+      />
+    );
+  }
+
+  return (
+    <SplitButton
+      menuLabel="Merge method"
+      value={method}
+      accent="success"
+      variant="tonal"
+      size="sm"
+      disabled={blockReason !== null}
+      onValueChange={(next) => {
+        if (isMergeMethod(next)) onMethodChange(next);
+      }}
+      onPress={onPress}
+    >
+      {mergeMethods.includes("merge") ? (
+        <SplitButtonOption value="merge" label={mergeMethodLabel("merge")} />
+      ) : null}
+      {mergeMethods.includes("squash") ? (
+        <SplitButtonOption value="squash" label={mergeMethodLabel("squash")} />
+      ) : null}
+      {mergeMethods.includes("rebase") ? (
+        <SplitButtonOption value="rebase" label={mergeMethodLabel("rebase")} />
+      ) : null}
+    </SplitButton>
+  );
+}
+
+const pullRequestBlockReason = (
+  pullRequest: PullRequestDetail,
+): string | null =>
+  pullRequest.mergeMethods.length === 0
+    ? "The repository allows no merge method."
+    : mergeBlockReason(pullRequest.mergeState);
+
+/**
+ * GitHub's merge box, the part read rather than pressed, for the Status: why
+ * the merge is refused, and Update branch when the base moved. `blocked` is
+ * left out: the checks and conversations listed beside it are the reason.
+ */
+export function PullRequestMergeStatus({
+  detail,
+  onEdit,
+}: PullRequestActionProps): ReactNode {
+  const { pullRequest } = detail;
+  if (pullRequest.state !== "open") return null;
+
+  const blockReason =
+    pullRequest.mergeState === "blocked"
+      ? null
+      : pullRequestBlockReason(pullRequest);
+  const unstable = pullRequest.mergeState === "unstable";
+  const canUpdateBranch =
+    pullRequest.viewerCanUpdateBranch || pullRequest.mergeState === "behind";
+  if (blockReason === null && !unstable && !canUpdateBranch) return null;
+
+  return (
+    <View className="items-start gap-xs">
+      {blockReason === null ? null : (
+        <Text className="text-xs text-muted">{blockReason}</Text>
+      )}
+      {unstable ? (
+        <Text className="text-xs text-muted">
+          Some checks that are not required are failing.
+        </Text>
+      ) : null}
+      {canUpdateBranch ? (
+        <ActionButton
+          text="Update branch"
+          accent="neutral"
+          variant="tonal"
+          size="sm"
+          errorToMessage={errorToMessage}
+          onPress={async () => {
+            await onEdit({
+              kind: "updateBranch",
+              expectedHeadSha: pullRequest.headSha,
+            });
+          }}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+const isCommittingMergeMethod = (
+  method: PullRequestMergeMethod,
+): method is PullRequestCommittingMergeMethod => method !== "rebase";
+
+interface CommitMessageDraft {
+  prefilled: PullRequestMergeCommitMessage;
+  draft: PullRequestMergeCommitMessage;
+}
+
+const editedCommitMessage = (
+  commit: CommitMessageDraft | null,
+): PullRequestMergeCommitMessage | undefined => {
+  if (commit === null) return undefined;
+  const { prefilled, draft } = commit;
+  if (draft.title === prefilled.title && draft.body === prefilled.body) {
+    return undefined;
+  }
+  return draft;
+};
+
+interface MergeCommitMessageFieldsProps {
+  value: PullRequestMergeCommitMessage;
+  onChange: (value: PullRequestMergeCommitMessage) => void;
+}
+
+function MergeCommitMessageFields({
+  value,
+  onChange,
+}: MergeCommitMessageFieldsProps): ReactNode {
+  return (
+    <View className="gap-m">
+      <FormItem
+        label="Commit message"
+        render={({ labelId, describedBy, invalid, required }) => (
+          <InputText
+            aria-labelledby={labelId}
+            aria-describedby={describedBy}
+            aria-required={required}
+            invalid={invalid}
+            value={value.title}
+            onChangeText={(title) => {
+              onChange({ ...value, title });
+            }}
+          />
+        )}
+      />
+      <FormItem
+        label="Extended description"
+        render={({ labelId, describedBy, invalid, required }) => (
+          <TextArea
+            aria-labelledby={labelId}
+            aria-describedby={describedBy}
+            aria-required={required}
+            invalid={invalid}
+            value={value.body}
+            numberOfLines={6}
+            onChangeText={(body) => {
+              onChange({ ...value, body });
+            }}
+          />
+        )}
+      />
+    </View>
+  );
+}
+
+/**
+ * The merge itself: a method among what the repository allows, behind a
+ * confirmation. The button is an affordance read from a state that may be
+ * stale; GitHub's refusal, with the head sha the screen saw, is the guard.
+ * The confirmation shows the commit GitHub would write, sent only when edited
+ * so that an untouched one stays GitHub's own.
+ */
+export function PullRequestMergeButton({
+  detail,
+  onEdit,
+}: PullRequestActionProps): ReactNode {
+  const { pullRequest } = detail;
+  const [chosen, setChosen] = useState<PullRequestMergeMethod | null>(null);
+  const [confirming, setConfirming] = useState(false);
+  const [commit, setCommit] = useState<CommitMessageDraft | null>(null);
+  if (pullRequest.state !== "open") return null;
+
+  const { mergeMethods } = pullRequest;
+  const method =
+    chosen !== null && mergeMethods.includes(chosen) ? chosen : mergeMethods[0];
+
+  return (
+    <>
+      <MergeButton
+        mergeMethods={mergeMethods}
+        method={method}
+        blockReason={pullRequestBlockReason(pullRequest)}
+        onMethodChange={setChosen}
+        onPress={() => {
+          if (method === undefined) return;
+          const prefilled = isCommittingMergeMethod(method)
+            ? pullRequest.mergeCommitMessages[method]
+            : null;
+          setCommit(
+            prefilled === null ? null : { prefilled, draft: prefilled },
+          );
+          setConfirming(true);
+        }}
+      />
+      {method === undefined ? null : (
+        <QuestionAlertDialog
+          visible={confirming}
+          accent="success"
+          title="Merge this pull request?"
+          confirmText={mergeMethodLabel(method)}
+          confirmDisabled={commit !== null && commit.draft.title.trim() === ""}
+          errorToMessage={errorToMessage}
+          onConfirm={async () => {
+            const commitMessage = editedCommitMessage(commit);
+            await onEdit({
+              kind: "merge",
+              method,
+              expectedHeadSha: pullRequest.headSha,
+              ...(commitMessage === undefined ? {} : { commitMessage }),
+            });
+            setConfirming(false);
+          }}
+          onCancel={() => {
+            setConfirming(false);
+          }}
+        >
+          <View className="gap-m">
+            <Text>
+              {`#${String(pullRequest.number)} goes into ${pullRequest.baseRef} on GitHub, under your login.`}
+            </Text>
+            {commit === null ? null : (
+              <MergeCommitMessageFields
+                value={commit.draft}
+                onChange={(draft) => {
+                  setCommit({ ...commit, draft });
+                }}
+              />
+            )}
+          </View>
+        </QuestionAlertDialog>
+      )}
+    </>
+  );
+}
+
+/** Closing is under the comment box, since it requires saying why. */
+export function PullRequestReopen({
+  detail,
+  onEdit,
+}: PullRequestActionProps): ReactNode {
+  const { pullRequest } = detail;
+  if (!pullRequest.viewerCanUpdate || pullRequest.state !== "closed") {
+    return null;
+  }
+
+  return (
+    <ActionButton
+      text="Reopen pull request"
+      accent="neutral"
+      variant="tonal"
+      size="sm"
+      errorToMessage={errorToMessage}
+      onPress={async () => {
+        await onEdit({ kind: "state", state: "open" });
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,218 @@
+import type {
+  PullRequestDetailResponse,
+  PullRequestEdit,
+  PullRequestReviewEvent,
+} from "@reviewflow/sdk";
+import {
+  ActionButton,
+  Button,
+  Code,
+  IconButton,
+  Modal,
+  Radio,
+  RadioGroup,
+  Text,
+  View,
+} from "alouette";
+import { XRegularIcon } from "alouette-icons/phosphor-icons/X";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import {
+  useDraftText,
+  usePullRequestDrafts,
+} from "../services/PullRequestDraftsProvider.tsx";
+import { usePullRequestReviewDraft } from "../services/PullRequestReviewDraftProvider.tsx";
+import { errorToMessage } from "../services/errorToMessage.ts";
+import { PullRequestMarkdownInput } from "./pull-request-markdown-input.tsx";
+
+export interface PullRequestActionProps {
+  detail: PullRequestDetailResponse;
+  /** sends one edit, then reads the pull request again */
+  onEdit: (edit: PullRequestEdit) => Promise<void>;
+}
+
+const isReviewEvent = (value: string): value is PullRequestReviewEvent =>
+  value === "comment" || value === "approve" || value === "requestChanges";
+
+const firstLine = (body: string): string => body.split("\n")[0] ?? "";
+
+/** What GitHub would refuse, said before the press rather than after. */
+const submitBlocker = (
+  event: PullRequestReviewEvent,
+  body: string,
+  commentCount: number,
+): string | null => {
+  const empty = body.trim() === "";
+  if (event === "requestChanges" && empty) {
+    return "Requesting changes needs a summary.";
+  }
+  if (event === "comment" && empty && commentCount === 0) {
+    return "A comment review needs a summary or at least one inline comment.";
+  }
+  return null;
+};
+
+/**
+ * "Review changes", ending the Files changed tab's sticky toolbar: the verdict, a
+ * summary and the inline comments the diff collected, sent as one review.
+ * Brand while comments are pending, so an unsent review is not forgotten. Never
+ * offered to the author, whom GitHub lets comment but not review. A review
+ * pinned to a head since replaced only comments: a verdict is given on the
+ * code as it stands, which the server checks too.
+ */
+export function PullRequestReviewButton({
+  detail,
+  onEdit,
+}: PullRequestActionProps): ReactNode {
+  const { pullRequest } = detail;
+  const { comments, remove, clear, shas, latest, follow } =
+    usePullRequestReviewDraft();
+  const [open, setOpen] = useState(false);
+  const [chosen, setChosen] = useState<PullRequestReviewEvent>("comment");
+  const drafts = usePullRequestDrafts();
+  const summary = useDraftText("review:body");
+  const body = summary.text;
+  const headMoved =
+    shas !== null && latest !== null && shas.head !== latest.head;
+  const event = headMoved ? "comment" : chosen;
+  const blocker = submitBlocker(event, body, comments.length);
+
+  return (
+    <>
+      <Button
+        text={
+          comments.length === 0
+            ? "Review changes"
+            : `Review changes (${String(comments.length)})`
+        }
+        accent={comments.length === 0 ? "neutral" : "brand"}
+        variant="tonal"
+        size="sm"
+        onPress={() => {
+          setOpen(true);
+        }}
+      />
+      <Modal
+        visible={open}
+        title="Review changes"
+        size="lg"
+        accent="brand"
+        footer={
+          <>
+            <Button
+              text="Cancel"
+              accent="neutral"
+              variant="soft"
+              onPress={() => {
+                setOpen(false);
+              }}
+            />
+            <ActionButton
+              text="Submit review"
+              accent="brand"
+              variant="tonal"
+              disabledReason={blocker}
+              errorMessageVariant="flat"
+              errorToMessage={errorToMessage}
+              onPress={async () => {
+                await onEdit({
+                  kind: "review",
+                  event,
+                  body,
+                  commitId: shas?.head ?? pullRequest.headSha,
+                  comments: comments.map(
+                    ({ key: _key, ...comment }) => comment,
+                  ),
+                });
+                clear();
+                summary.discard(body);
+                setChosen("comment");
+                setOpen(false);
+              }}
+            />
+          </>
+        }
+        onClose={() => {
+          setOpen(false);
+        }}
+      >
+        <View className="gap-m">
+          <PullRequestMarkdownInput
+            aria-label="Review summary"
+            value={body}
+            onChange={summary.setText}
+          />
+          {/* TODO: rows stretch to the full width once alouette allows it: https://github.com/christophehurpeau/alouette/issues/397 */}
+          <RadioGroup
+            aria-label="Verdict"
+            value={event}
+            onValueChange={(next) => {
+              if (isReviewEvent(next)) setChosen(next);
+            }}
+          >
+            <Radio value="comment" label="Comment" />
+            <Radio value="approve" label="Approve" disabled={headMoved} />
+            <Radio
+              value="requestChanges"
+              label="Request changes"
+              disabled={headMoved}
+            />
+          </RadioGroup>
+          {headMoved && follow === null ? (
+            <Text className="text-sm text-muted">
+              New commits were pushed since this review started: it can only
+              comment. Approve or request changes once it is sent, on the latest
+              version.
+            </Text>
+          ) : null}
+          {headMoved && follow !== null ? (
+            <Text className="text-sm text-muted">
+              New commits were pushed since this diff was shown: this review can
+              only comment. Show the latest changes to approve or request
+              changes.
+            </Text>
+          ) : null}
+          {blocker === null ? null : (
+            <Text className="text-sm text-muted">{blocker}</Text>
+          )}
+          <View className="gap-xs">
+            <Text className="font-body-bold text-sm">
+              {`Inline comments (${String(comments.length)})`}
+            </Text>
+            {comments.length === 0 ? (
+              <Text className="text-sm text-muted">
+                None. Add them from the Files changed tab.
+              </Text>
+            ) : (
+              comments.map((comment) => (
+                <View
+                  key={comment.key}
+                  className="flex-row items-center gap-xs"
+                >
+                  <Code className="text-sm">{`${comment.path}:${String(comment.line)}`}</Code>
+                  <Text className="min-w-0 flex-1 text-sm" numberOfLines={1}>
+                    {firstLine(comment.body)}
+                  </Text>
+                  <IconButton
+                    icon={<XRegularIcon />}
+                    aria-label={`Remove the comment on ${comment.path}:${String(comment.line)}`}
+                    variant="soft"
+                    size="sm"
+                    onPress={() => {
+                      remove(comment.key);
+                    }}
+                  />
+                </View>
+              ))
+            )}
+          </View>
+          <Text className="text-xs text-muted">
+            {drafts === null
+              ? "Pending comments live in memory until the review is sent: reloading or leaving this pull request drops them."
+              : `Pending comments and the summary are kept on this device until the review is sent, for ${String(drafts.retentionDays)} days after their last change.`}
+          </Text>
+        </View>
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,86 @@
+import type { PullRequestCheck } from "@reviewflow/sdk";
+import type { Accent } from "alouette";
+import { AccentScope, ExternalLinkText, Icon, Text, View } from "alouette";
+import { CheckCircleRegularIcon } from "alouette-icons/phosphor-icons/CheckCircle";
+import { CircleNotchRegularIcon } from "alouette-icons/phosphor-icons/CircleNotch";
+import { ClockRegularIcon } from "alouette-icons/phosphor-icons/Clock";
+import { XCircleRegularIcon } from "alouette-icons/phosphor-icons/XCircle";
+import type { ReactNode } from "react";
+
+const checkAccent = (outcome: PullRequestCheck["outcome"]): Accent => {
+  if (outcome === "failed") return "danger";
+  if (outcome === "pending") return "warning";
+  return "success";
+};
+
+const checkLabel = (check: PullRequestCheck): string => {
+  if (check.outcome === "failed") return "failing";
+  if (check.running) return "running";
+  if (check.outcome === "pending") return "pending";
+  return "passing";
+};
+
+function CheckGlyph({ check }: { check: PullRequestCheck }): ReactNode {
+  if (check.outcome === "failed") {
+    return (
+      <Icon icon={<XCircleRegularIcon />} size={16} className="text-accent" />
+    );
+  }
+  if (check.running) {
+    return (
+      <View className="motion-safe:animate-spin">
+        <Icon
+          icon={<CircleNotchRegularIcon />}
+          size={16}
+          className="text-accent"
+        />
+      </View>
+    );
+  }
+  if (check.outcome === "pending") {
+    return (
+      <Icon icon={<ClockRegularIcon />} size={16} className="text-accent" />
+    );
+  }
+  return (
+    <Icon icon={<CheckCircleRegularIcon />} size={16} className="text-accent" />
+  );
+}
+
+/**
+ * A glyph in a fixed column rather than a word badge: the sidebar is narrow,
+ * and the name and what the check says about itself wrap beside it instead of
+ * under it. The description of a passing check is left out — it says it passed.
+ */
+export function CheckLine({ check }: { check: PullRequestCheck }): ReactNode {
+  return (
+    <View className="flex-row items-start gap-xs">
+      <AccentScope accent={checkAccent(check.outcome)}>
+        <View
+          role="img"
+          aria-label={checkLabel(check)}
+          className="h-[20px] justify-center"
+        >
+          <CheckGlyph check={check} />
+        </View>
+      </AccentScope>
+      <View className="min-w-0 flex-1">
+        {check.url === null ? (
+          <Text className="text-sm">{check.name}</Text>
+        ) : (
+          <ExternalLinkText
+            size="sm"
+            icon={null}
+            accent="neutral"
+            href={check.url}
+            text={check.name}
+            aria-label={`Open ${check.name}`}
+          />
+        )}
+        {check.description !== null && check.outcome !== "passed" ? (
+          <Text className="text-xs text-muted">{check.description}</Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}