@reviewflow/ui 6.25.0 → 6.27.0

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

@@ -7,12 +7,7 @@ import type {
   PullRequestReviewState,
   PullRequestSummary,
 } from "@reviewflow/sdk";
-import {
-  pluralOf,
-  prStatus,
-  prStatusLabels,
-  reviewflowPrStatus,
-} from "@reviewflow/sdk";
+import { pluralOf, prStatusLabels, reviewflowPrStatus } from "@reviewflow/sdk";
 import type { Accent } from "alouette";
 import {
   AccentScope,
@@ -40,7 +35,7 @@ import { ChatCircleDotsRegularIcon } from "alouette-icons/phosphor-icons/ChatCir
 import type { ReactNode } from "react";
 import { useState } from "react";
 import { usePullRequestDataSource } from "../dataSource.ts";
-import { prStatusAccents } from "../prStatus.ts";
+import { usePrStatusAccent } from "../prStatus.ts";
 import { emojify } from "../services/emojify.ts";
 import { errorToMessage } from "../services/errorToMessage.ts";
 import { formatDataAge } from "../services/formatDataAge.ts";
@@ -59,6 +54,7 @@ import {
   PullRequestPartPending,
   PullRequestPartReading,
 } from "./pull-request-part-notice.tsx";
+import { RepoName } from "./pull-request-repo-name.tsx";
 import { PullRequestReview } from "./pull-request-review.tsx";
 import { PullRequestTimeline } from "./pull-request-timeline.tsx";
 
@@ -156,6 +152,19 @@ interface MergeLineProps {
   children?: ReactNode;
 }
 
+/** Badge aligns itself to the start: in a row, that is the top, not the center. */
+function CenteredBadge({ children }: { children: ReactNode }): ReactNode {
+  return <View className="justify-center">{children}</View>;
+}
+
+function StatusBadge({ status }: { status: PrStatus }): ReactNode {
+  return (
+    <CenteredBadge>
+      <Badge accent={usePrStatusAccent(status)}>{prStatusLabels[status]}</Badge>
+    </CenteredBadge>
+  );
+}
+
 function MergeLine({
   status,
   author,
@@ -165,9 +174,7 @@ function MergeLine({
 }: MergeLineProps): ReactNode {
   return (
     <View className="flex-row flex-wrap items-center gap-xs">
-      {status === null ? null : (
-        <Badge accent={prStatusAccents[status]}>{prStatusLabels[status]}</Badge>
-      )}
+      {status === null ? null : <StatusBadge status={status} />}
       <Text className="text-sm font-body-bold">
         {author ?? "unknown author"}
       </Text>
@@ -197,6 +204,7 @@ export function PullRequestSummaryHeader({
 }): ReactNode {
   return (
     <View className="gap-sm">
+      <RepoName ownerRepo={summary.ownerRepo} />
       <TitleText number={summary.number} title={summary.title} />
       <MergeLine
         status={reviewflowPrStatus(summary)}
@@ -208,16 +216,23 @@ export function PullRequestSummaryHeader({
   );
 }
 
+interface HeaderProps extends EditableProps {
+  summary: PullRequestSummary | null;
+}
+
 /**
  * The header: the title and its number, Edit and the way out beside
- * them, and one line saying whose branch goes where.
+ * them, and one line saying whose branch goes where. The review status is
+ * reviewflow's, never recomputed from GitHub's: without reviewflow's
+ * summary, an open pull request shows none.
  */
-function Header({ detail, onEdited }: EditableProps): ReactNode {
+function Header({ detail, summary, onEdited }: HeaderProps): ReactNode {
   const { pullRequest } = detail;
   const [editing, setEditing] = useState(false);
 
   return (
     <View className="gap-sm">
+      <RepoName ownerRepo={pullRequest.ownerRepo} />
       {editing ? (
         <TitleEditor
           detail={detail}
@@ -247,7 +262,10 @@ function Header({ detail, onEdited }: EditableProps): ReactNode {
         </View>
       )}
       <MergeLine
-        status={prStatus(pullRequest)}
+        status={reviewflowPrStatus({
+          state: pullRequest.state,
+          reviewState: summary?.reviewState ?? null,
+        })}
         author={pullRequest.author?.login ?? null}
         baseRef={pullRequest.baseRef}
         headRef={pullRequest.headRef}
@@ -584,15 +602,17 @@ function ReviewerLine({
       <Text className="min-w-0 flex-1 text-sm" numberOfLines={1}>
         {name}
       </Text>
-      {state === null ? (
-        <Badge accent="warning" size="sm">
-          awaiting
-        </Badge>
-      ) : (
-        <Badge accent={reviewStateAccent(state)} size="sm">
-          {reviewStateLabel(state)}
-        </Badge>
-      )}
+      <CenteredBadge>
+        {state === null ? (
+          <Badge accent="warning" size="sm">
+            awaiting
+          </Badge>
+        ) : (
+          <Badge accent={reviewStateAccent(state)} size="sm">
+            {reviewStateLabel(state)}
+          </Badge>
+        )}
+      </CenteredBadge>
       {onRerequest === undefined ? null : (
         <RerequestButton name={name} onRerequest={onRerequest} />
       )}
@@ -1161,6 +1181,8 @@ function PullRequestActions({ detail, onEdited }: EditableProps): ReactNode {
 }
 
 export interface PullRequestPanelProps extends CandidatesProps {
+  /** reviewflow's copy, where the review status comes from; null without reviewflow */
+  summary: PullRequestSummary | null;
   /** why the editors stay read-only, when GitHub refused what they offer */
   candidatesError: string | null;
   /** absent: the first tab, Review for a reviewer and Conversation for the author */
@@ -1181,6 +1203,7 @@ export interface PullRequestPanelProps extends CandidatesProps {
  */
 export function PullRequestPanel({
   detail,
+  summary,
   candidates,
   candidatesError,
   onEdited,
@@ -1212,7 +1235,7 @@ export function PullRequestPanel({
           {`Reviewers, assignees and labels cannot be edited: ${candidatesError}`}
         </WarningMessage>
       )}
-      <Header detail={detail} onEdited={onEdited} />
+      <Header detail={detail} summary={summary} onEdited={onEdited} />
       <ConflictWarning pullRequest={pullRequest} />
       <View className="flex-row flex-wrap items-center justify-between gap-sm">
         <Tabs

package/src/components/pull-request-repo-name.tsx

@@ -0,0 +1,27 @@
+import { Text, View } from "alouette";
+import type { ReactNode } from "react";
+import { createContext, use } from "react";
+
+/**
+ * How an app links a repository's name to its own screen of it, the router
+ * being the app's; null keeps the name as plain text, e.g. for a repository
+ * the app has no screen of.
+ */
+export type RenderRepoLink = (ownerRepo: string) => ReactNode;
+
+export const RepoLinkContext = createContext<RenderRepoLink | null>(null);
+
+export interface RepoNameProps {
+  ownerRepo: string;
+}
+
+/** The repository above a pull request's title, a link when the app gives one. */
+export function RepoName({ ownerRepo }: RepoNameProps): ReactNode {
+  const renderRepoLink = use(RepoLinkContext);
+  const link = renderRepoLink?.(ownerRepo) ?? null;
+  if (link === null) {
+    return <Text className="text-sm text-muted">{ownerRepo}</Text>;
+  }
+  // a link stretches in a column: the row keeps it as wide as its name
+  return <View className="flex-row">{link}</View>;
+}

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

@@ -40,6 +40,8 @@ import {
   PullRequestPartPending,
   usePartReadingCount,
 } from "./pull-request-part-notice.tsx";
+import type { RenderRepoLink } from "./pull-request-repo-name.tsx";
+import { RepoLinkContext } from "./pull-request-repo-name.tsx";
 import { RepositoryAttachmentBanner } from "./repository-attachment-banner.tsx";
 
 /** How old what the header shows is: GitHub's answer, or the last read shown meanwhile. */
@@ -184,6 +186,7 @@ function PullRequestBody({
               <PartReadingScope value={partsReadInTabs.report}>
                 <PullRequestPanel
                   detail={detail}
+                  summary={summary}
                   candidates={candidates}
                   candidatesError={candidatesError}
                   tab={tab}
@@ -236,6 +239,8 @@ export interface PullRequestScreenProps {
     ref: PullRequestRef,
     detail: PullRequestDetailResponse | null,
   ) => ReactNode;
+  /** links the repository's name above the title; absent or null: plain text */
+  renderRepoLink?: RenderRepoLink;
   /** what the app replaces, see {@link PullRequestSlots} */
   slots?: PullRequestSlots;
   /**
@@ -285,35 +290,38 @@ export function PullRequestScreen({
   initialWhitespace,
   diffFileOrder,
   onDiffFileOrderChange,
+  renderRepoLink,
   ...body
 }: PullRequestScreenProps): ReactNode {
   return (
-    <PullRequestSlotsProvider value={slots}>
-      <DiffSettingsProvider
-        theme={diffTheme}
-        font={diffFont}
-        customFont={diffCustomFont}
-        wordWrap={diffWordWrap}
-        initialWhitespace={initialWhitespace}
-        fileOrder={diffFileOrder}
-        onFileOrderChange={onDiffFileOrderChange}
-      >
-        <View className="w-full px-l pt-l pb-xl web:@container">
-          <View className="mx-auto w-full max-w-[1200px] gap-m">
-            <PullRequestDraftsProvider
-              store={draftStore}
-              pullRequest={{ ownerRepo, number }}
-            >
-              <PullRequestBody
-                key={`${ownerRepo}#${String(number)}`}
-                ownerRepo={ownerRepo}
-                number={number}
-                {...body}
-              />
-            </PullRequestDraftsProvider>
+    <RepoLinkContext value={renderRepoLink ?? null}>
+      <PullRequestSlotsProvider value={slots}>
+        <DiffSettingsProvider
+          theme={diffTheme}
+          font={diffFont}
+          customFont={diffCustomFont}
+          wordWrap={diffWordWrap}
+          initialWhitespace={initialWhitespace}
+          fileOrder={diffFileOrder}
+          onFileOrderChange={onDiffFileOrderChange}
+        >
+          <View className="w-full px-l pt-l pb-xl web:@container">
+            <View className="mx-auto w-full max-w-[1200px] gap-m">
+              <PullRequestDraftsProvider
+                store={draftStore}
+                pullRequest={{ ownerRepo, number }}
+              >
+                <PullRequestBody
+                  key={`${ownerRepo}#${String(number)}`}
+                  ownerRepo={ownerRepo}
+                  number={number}
+                  {...body}
+                />
+              </PullRequestDraftsProvider>
+            </View>
           </View>
-        </View>
-      </DiffSettingsProvider>
-    </PullRequestSlotsProvider>
+        </DiffSettingsProvider>
+      </PullRequestSlotsProvider>
+    </RepoLinkContext>
   );
 }

package/src/components/remove-worktree-button.tsx

@@ -0,0 +1,233 @@
+import type {
+  WorktreeRemovalResult,
+  WorktreeRemovalStatus,
+} from "@reviewflow/sdk";
+import { worktreeRemovalRefusals } from "@reviewflow/sdk";
+import {
+  Button,
+  Checkbox,
+  Code,
+  ConfirmationMessage,
+  Text,
+  View,
+  WarningAlertDialog,
+  WarningMessage,
+} from "alouette";
+import { TrashRegularIcon } from "alouette-icons/phosphor-icons/Trash";
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { errorToMessage } from "../services/errorToMessage.ts";
+
+const visibleIgnored = 10;
+
+export interface IgnoredFilesProps {
+  paths: string[];
+}
+
+/**
+ * Not a guard: an ignored file is usually disposable, so the reader decides.
+ * Each path is prefixed `./` because a bare `~/…` (an agent writing to an
+ * unexpanded home path) reads as the home directory.
+ */
+export function IgnoredFiles({ paths }: IgnoredFilesProps): ReactNode {
+  if (paths.length === 0) return null;
+  const hidden = paths.length - visibleIgnored;
+  return (
+    <View className="gap-xxs">
+      <WarningMessage variant="flat">
+        Lost with the worktree: ignored by git, so not counted as uncommitted,
+        real files and not symlinks, and the main checkout has no copy. Move
+        them out first if you need them.
+      </WarningMessage>
+      {paths.slice(0, visibleIgnored).map((path) => (
+        <Code key={path}>{`./${path}`}</Code>
+      ))}
+      {hidden > 0 ? (
+        <Text className="text-sm text-muted">{`and ${String(hidden)} more`}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+/** What a confirmation reads before it offers the removal. */
+export interface WorktreeRemovalCheck {
+  status: WorktreeRemovalStatus;
+  /** the branch's work is demonstrably spent (a merged pull request): the branch box starts checked */
+  branchSpent: boolean;
+  /** under the refusals, e.g. why no pull request could prove a commit pushed */
+  notice: string | null;
+}
+
+export interface WorktreeRemovalMessagesProps {
+  check: WorktreeRemovalCheck;
+}
+
+/** Every refusal, or the all-clear; the notice; then the ignored files the removal takes. */
+export function WorktreeRemovalMessages({
+  check,
+}: WorktreeRemovalMessagesProps): ReactNode {
+  const refusals = worktreeRemovalRefusals(check.status);
+  return (
+    <>
+      {refusals.map((refusal) => (
+        <WarningMessage key={refusal} variant="flat">
+          {refusal}
+        </WarningMessage>
+      ))}
+      {refusals.length === 0 ? (
+        <ConfirmationMessage variant="flat">
+          No uncommitted file, every commit is on a remote branch or in a pull
+          request, and nothing runs inside.
+        </ConfirmationMessage>
+      ) : null}
+      {check.notice === null ? null : (
+        <Text className="text-sm text-muted">{check.notice}</Text>
+      )}
+      <IgnoredFiles paths={check.status.localOnlyIgnored} />
+    </>
+  );
+}
+
+interface CheckState {
+  check: WorktreeRemovalCheck | null;
+  error: string | null;
+}
+
+const unread: CheckState = { check: null, error: null };
+
+const branchDetails =
+  "Only the local branch: git refuses while it is unmerged, and the remote is never touched.";
+
+export interface RemoveWorktreeButtonProps {
+  /** named before git answers anything */
+  path: string;
+  /** read on every opening: an answer kept from the last one could let a changed worktree through */
+  readCheck: () => Promise<WorktreeRemovalCheck>;
+  /** runs the removal; the server reads every refusal again first */
+  onRemove: (deleteBranch: boolean) => Promise<WorktreeRemovalResult>;
+  /** after the removal, the branch's refusal included */
+  onRemoved: (result: WorktreeRemovalResult) => void;
+  /** why the button cannot be pressed at all, e.g. a removal already running */
+  disabledReason?: string | null;
+}
+
+/**
+ * Removes a worktree after a confirmation that reads what it would lose.
+ * Remove stays disabled until that read proves no uncommitted file, no commit
+ * only here, no lock and no process inside; an unread or failed read disables
+ * it too, since nothing is proven. A `WarningAlertDialog`: one of the buttons
+ * deletes files, and the icon says so before the copy is read.
+ */
+export function RemoveWorktreeButton({
+  path,
+  readCheck,
+  onRemove,
+  onRemoved,
+  disabledReason = null,
+}: RemoveWorktreeButtonProps): ReactNode {
+  const [confirming, setConfirming] = useState(false);
+  const [read, setRead] = useState<CheckState>(unread);
+  const [pickedDeleteBranch, setPickedDeleteBranch] = useState<boolean | null>(
+    null,
+  );
+  // an answer to an earlier opening must not land in this one
+  const opening = useRef(0);
+  const { check } = read;
+  const branch = check?.status.branch ?? null;
+  const deleteBranch =
+    pickedDeleteBranch ?? (branch !== null && check?.branchSpent === true);
+  const removable =
+    check !== null && worktreeRemovalRefusals(check.status).length === 0;
+
+  const open = (): void => {
+    opening.current += 1;
+    const current = opening.current;
+    setConfirming(true);
+    setRead(unread);
+    setPickedDeleteBranch(null);
+    readCheck().then(
+      (answer) => {
+        if (opening.current === current) {
+          setRead({ check: answer, error: null });
+        }
+      },
+      (error: unknown) => {
+        if (opening.current === current) {
+          setRead({ check: null, error: errorToMessage(error) });
+        }
+      },
+    );
+  };
+
+  const close = (): void => {
+    opening.current += 1;
+    setConfirming(false);
+    setRead(unread);
+  };
+
+  const body = ((): ReactNode => {
+    if (read.error !== null) {
+      return (
+        <WarningMessage variant="flat">
+          {`Could not read the worktree: ${read.error}. Remove stays disabled until it can be.`}
+        </WarningMessage>
+      );
+    }
+    if (check === null) {
+      return (
+        <Text className="text-sm text-muted">
+          Checking for uncommitted files, unpushed commits and processes inside…
+        </Text>
+      );
+    }
+    return <WorktreeRemovalMessages check={check} />;
+  })();
+
+  return (
+    <>
+      <Button
+        text="Remove"
+        icon={<TrashRegularIcon />}
+        size="sm"
+        variant="tonal"
+        accent="danger"
+        aria-label={`Remove the worktree at ${path}`}
+        disabledReason={disabledReason}
+        onPress={open}
+      />
+      <WarningAlertDialog
+        visible={confirming}
+        title="Remove this worktree?"
+        confirmText="Remove"
+        primaryAction="cancel"
+        confirmDisabled={!removable}
+        errorToMessage={errorToMessage}
+        content={
+          <View className="gap-sm">
+            <Code>{path}</Code>
+            {body}
+            {branch === null || check === null ? null : (
+              <View className="gap-xxs">
+                <Checkbox
+                  label={`Also delete the branch ${branch}`}
+                  checked={deleteBranch}
+                  onValueChange={setPickedDeleteBranch}
+                />
+                <Text className="text-sm text-muted">{branchDetails}</Text>
+              </View>
+            )}
+          </View>
+        }
+        onConfirm={async () => {
+          const result = await onRemove(deleteBranch);
+          close();
+          onRemoved(result);
+        }}
+        onCancel={close}
+      >
+        Its directory is deleted from disk. git refuses on its own if a file
+        changed since this check.
+      </WarningAlertDialog>
+    </>
+  );
+}