feat(plugins): add source-control extension contracts (#2117)

apps/web/components/gitlab/mr-topbar-button.test.ts

@@ -74,7 +74,10 @@ describe("mrTriggerClass", () => {
       project_path: "group/b",
       mr_iid: 22,
     } as TaskMR);
-    expect(setReview).toHaveBeenCalledWith("session-1", "https://gitlab.example|group/b|22");
+    expect(setReview).toHaveBeenCalledWith(
+      "session-1",
+      "gitlab:https%3A%2F%2Fgitlab.example:group%2Fb:22",
+    );
   });
 
   it("confirms desktop MR focus after dockview finishes its layout work", () => {

apps/web/components/gitlab/mr-topbar-button.tsx

@@ -39,6 +39,7 @@ import { TaskMRLinkDialog } from "./task-mr-link-dialog";
 import { MRAutomationControls } from "./mr-automation-controls";
 import { MRCIPopover } from "./mr-ci-popover";
 import { useDockviewStore } from "@/lib/state/dockview-store";
+import { reviewItemId } from "@/components/task/review-selection";
 import { mrTaskKey } from "./mr-detail-panel";
 import { useTranslation } from "react-i18next";
 import { MRStatusIcon } from "./mr-task-icon";
@@ -73,7 +74,15 @@ export function openMobileMRReview(
   sessionId: string,
   mr: TaskMR,
 ) {
-  setReview(sessionId, mrTaskKey(mr));
+  setReview(
+    sessionId,
+    reviewItemId({
+      providerId: "gitlab",
+      connectionScope: mr.host,
+      repositoryId: mr.repository_id || mr.project_path,
+      changeRequestNumber: mr.mr_iid,
+    }),
+  );
 }
 
 export function openDesktopMRReview(

apps/web/components/gitlab/my-gitlab/list-toolbar.tsx

@@ -1,11 +1,8 @@
 "use client";
 
-import { IconRefresh } from "@tabler/icons-react";
-import { Button } from "@kandev/ui/button";
-import { Input } from "@kandev/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
-import { cn, formatRelativeTime } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
+import { IntegrationListToolbar } from "@/components/integrations/integration-list-toolbar";
 
 const ALL_PROJECTS = "__all__";
 
@@ -24,41 +21,6 @@ type ListToolbarProps = {
   onRefresh: () => void;
 };
 
-function RefreshControls({
-  loading,
-  lastFetchedAt,
-  onRefresh,
-  showUpdatedPrefix,
-}: {
-  loading: boolean;
-  lastFetchedAt: Date | null;
-  onRefresh: () => void;
-  showUpdatedPrefix: boolean;
-}) {
-  const { t } = useTranslation();
-  return (
-    <>
-      {lastFetchedAt && !loading && (
-        <span className="text-xs text-muted-foreground whitespace-nowrap">
-          {showUpdatedPrefix ? t("gitlab:updated") : ""}
-          {formatRelativeTime(lastFetchedAt.toISOString())}
-        </span>
-      )}
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-8 w-8 cursor-pointer"
-        onClick={onRefresh}
-        disabled={loading}
-        title={t("gitlab:refresh")}
-        data-testid="gitlab-list-toolbar-refresh"
-      >
-        <IconRefresh className={cn("h-4 w-4", loading && "animate-spin")} />
-      </Button>
-    </>
-  );
-}
-
 export function ListToolbar({
   title,
   count,
@@ -75,79 +37,44 @@ export function ListToolbar({
 }: ListToolbarProps) {
   const { t } = useTranslation();
   const selectValue = projectFilter || ALL_PROJECTS;
-  const dirty = customQuery !== committedQuery;
   return (
-    <div className="px-4 sm:px-6 py-2.5 border-b shrink-0 flex flex-col md:flex-row md:items-center md:flex-wrap gap-2 md:gap-3">
-      <div className="flex items-center gap-2 min-w-0">
-        <div className="flex items-baseline gap-2 min-w-0 flex-1 md:flex-initial">
-          <h2 className="text-sm font-semibold truncate" data-testid="gitlab-list-toolbar-title">
-            {title}
-          </h2>
-          <span className="text-xs text-muted-foreground tabular-nums">
-            {loading ? "…" : count}
-          </span>
-        </div>
-        <div className="flex items-center gap-2 md:hidden">
-          <RefreshControls
-            loading={loading}
-            lastFetchedAt={lastFetchedAt}
-            onRefresh={onRefresh}
-            showUpdatedPrefix={false}
-          />
-        </div>
-      </div>
-      <Select
-        value={selectValue}
-        onValueChange={(v) => onProjectFilterChange(v === ALL_PROJECTS ? "" : v)}
-      >
-        <SelectTrigger
-          className="w-full md:w-[220px] h-8 cursor-pointer"
-          data-testid="gitlab-project-filter-trigger"
+    <IntegrationListToolbar
+      title={title}
+      count={count}
+      loading={loading}
+      lastFetchedAt={lastFetchedAt}
+      customQuery={customQuery}
+      committedQuery={committedQuery}
+      onCustomQueryChange={onCustomQueryChange}
+      onCommitCustomQuery={onCommitCustomQuery}
+      onRefresh={onRefresh}
+      filter={
+        <Select
+          value={selectValue}
+          onValueChange={(value) => onProjectFilterChange(value === ALL_PROJECTS ? "" : value)}
         >
-          <SelectValue placeholder={t("gitlab:allProjects")} />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value={ALL_PROJECTS} className="cursor-pointer">
-            {t("gitlab:allProjects")}
-          </SelectItem>
-          {projectOptions.map((key) => (
-            <SelectItem key={key} value={key} className="cursor-pointer">
-              {key}
+          <SelectTrigger
+            className="h-8 w-full cursor-pointer md:w-[220px]"
+            data-testid="gitlab-project-filter-trigger"
+          >
+            <SelectValue placeholder={t("gitlab:allProjects")} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={ALL_PROJECTS} className="cursor-pointer">
+              {t("gitlab:allProjects")}
             </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <div className="w-full md:flex-1 md:min-w-[240px] relative">
-        <Input
-          value={customQuery}
-          onChange={(e) => onCustomQueryChange(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              onCommitCustomQuery();
-            }
-          }}
-          onBlur={() => {
-            if (dirty) onCommitCustomQuery();
-          }}
-          placeholder={t("gitlab:customQueryPressEnterEG")}
-          className="h-8 pr-20"
-          data-testid="gitlab-list-toolbar-custom-query"
-        />
-        {dirty && (
-          <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[10px] uppercase tracking-wider text-muted-foreground hidden sm:inline">
-            {t("gitlab:pressEnter")}
-          </span>
-        )}
-      </div>
-      <div className="hidden md:flex items-center gap-2 md:ml-auto">
-        <RefreshControls
-          loading={loading}
-          lastFetchedAt={lastFetchedAt}
-          onRefresh={onRefresh}
-          showUpdatedPrefix
-        />
-      </div>
-    </div>
+            {projectOptions.map((key) => (
+              <SelectItem key={key} value={key} className="cursor-pointer">
+                {key}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      }
+      queryPlaceholder={t("gitlab:customQueryPressEnterEG")}
+      titleTestId="gitlab-list-toolbar-title"
+      queryTestId="gitlab-list-toolbar-custom-query"
+      refreshTestId="gitlab-list-toolbar-refresh"
+    />
   );
 }

apps/web/components/gitlab/my-gitlab/mr-list.tsx

@@ -1,16 +1,17 @@
 "use client";
 
-import { IconGitPullRequest, IconGitPullRequestClosed, IconGitMerge } from "@tabler/icons-react";
-import type { Icon } from "@tabler/icons-react";
-import { Spinner } from "@kandev/ui/spinner";
 import { cn, formatRelativeTime } from "@/lib/utils";
 import type { MR, TaskMR } from "@/lib/types/gitlab";
 import type { GitLabLaunchPayload, GitLabTaskPreset } from "./quick-task-launcher";
 import { gitLabMRKey } from "@/lib/gitlab-identity";
 import { MRRowTaskIndicator } from "./mr-row-task-indicator";
 import { StartTaskMenu } from "./start-task-menu";
-import { RowTitleLink } from "./row-title-link";
 import { useTranslation } from "react-i18next";
+import { ChangeRequestList, ChangeRequestRow } from "@/components/integrations/change-request-list";
+import {
+  IntegrationIcon,
+  type IntegrationIconName,
+} from "@/components/integrations/integration-icon";
 
 type MRListProps = {
   items: MR[];
@@ -21,14 +22,14 @@ type MRListProps = {
   mrKeyToTasks?: Map<string, TaskMR[]>;
 };
 
-function mrStateIcon(mr: MR): { Icon: Icon; className: string } {
+function mrStateIcon(mr: MR): { name: IntegrationIconName; className: string } {
   const state = mr.state === "opened" ? "open" : mr.state;
   if (state === "merged")
-    return { Icon: IconGitMerge, className: "text-purple-600 dark:text-purple-400" };
+    return { name: "merged", className: "text-purple-600 dark:text-purple-400" };
   if (state === "closed")
-    return { Icon: IconGitPullRequestClosed, className: "text-red-600 dark:text-red-400" };
-  if (mr.draft) return { Icon: IconGitPullRequest, className: "text-muted-foreground" };
-  return { Icon: IconGitPullRequest, className: "text-emerald-600 dark:text-emerald-400" };
+    return { name: "pull-request-closed", className: "text-red-600 dark:text-red-400" };
+  if (mr.draft) return { name: "pull-request", className: "text-muted-foreground" };
+  return { name: "pull-request", className: "text-emerald-600 dark:text-emerald-400" };
 }
 
 function MRRow({
@@ -42,18 +43,15 @@ function MRRow({
   presets: GitLabTaskPreset[];
   onStartTask?: MRListProps["onStartTask"];
 }) {
+  const { name: stateIconName, className: stateIconClass } = mrStateIcon(mr);
   const { t } = useTranslation();
-  const { Icon: StateIcon, className: stateIconClass } = mrStateIcon(mr);
   return (
-    <div
-      className="flex items-start gap-3 px-4 py-3 hover:bg-muted/40 transition-colors"
-      data-testid="mr-row"
-      data-mr-iid={mr.iid}
-    >
-      <StateIcon className={cn("h-4 w-4 mt-1 shrink-0", stateIconClass)} />
-      <div className="min-w-0 flex-1">
-        <RowTitleLink href={mr.web_url} title={mr.title} />
-        <div className="flex flex-wrap items-center gap-x-2 gap-y-1 mt-0.5 text-xs text-muted-foreground">
+    <ChangeRequestRow
+      stateIcon={<IntegrationIcon name={stateIconName} className={cn("h-4 w-4", stateIconClass)} />}
+      title={mr.title}
+      href={mr.web_url}
+      metadata={
+        <>
           <span className="whitespace-nowrap">
             {mr.project_path}!{mr.iid}
           </span>
@@ -68,49 +66,26 @@ function MRRow({
               time: formatRelativeTime(mr.created_at),
             })}
           </span>
-          <MRRowTaskIndicator tasks={tasks} />
-        </div>
-      </div>
-      <div className="shrink-0">
-        {onStartTask ? (
+        </>
+      }
+      taskIndicator={<MRRowTaskIndicator tasks={tasks} />}
+      action={
+        onStartTask ? (
           <StartTaskMenu
             presets={presets}
             onSelect={(preset) => onStartTask({ kind: "mr", mr, preset })}
           />
-        ) : null}
-      </div>
-    </div>
+        ) : null
+      }
+      testId="mr-row"
+      dataAttributes={{ "data-mr-iid": mr.iid }}
+    />
   );
 }
 
-function MRListBody({
-  loading,
-  error,
-  items,
-  presets = [],
-  onStartTask,
-  mrKeyToTasks,
-}: MRListProps) {
-  const { t } = useTranslation();
-  if (loading) {
-    return (
-      <div className="flex justify-center py-10">
-        <Spinner />
-      </div>
-    );
-  }
-  if (error) {
-    return <div className="text-center py-10 text-destructive text-sm">{error}</div>;
-  }
-  if (items.length === 0) {
-    return (
-      <div className="text-center py-10 text-muted-foreground text-sm">
-        {t("gitlab:noMergeRequestsMatchThisFilter")}
-      </div>
-    );
-  }
+function MRListBody({ items, presets = [], onStartTask, mrKeyToTasks }: MRListProps) {
   return (
-    <div className="divide-y">
+    <>
       {items.map((mr) => (
         <MRRow
           key={`${mr.project_path}-${mr.iid}`}
@@ -120,14 +95,20 @@ function MRListBody({
           onStartTask={onStartTask}
         />
       ))}
-    </div>
+    </>
   );
 }
 
 export function MRList(props: MRListProps) {
+  const { t } = useTranslation();
   return (
-    <div className="rounded-md border overflow-hidden">
+    <ChangeRequestList
+      loading={props.loading}
+      error={props.error}
+      emptyMessage={t("gitlab:noMergeRequestsMatchThisFilter")}
+      isEmpty={props.items.length === 0}
+    >
       <MRListBody {...props} />
-    </div>
+    </ChangeRequestList>
   );
 }

apps/web/components/gitlab/my-gitlab/mr-row-task-indicator.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { TaskMR } from "@/lib/types/gitlab";
-import { TaskRowIndicator } from "@/components/github/my-github/task-row-indicator";
+import { TaskRowIndicator } from "@/components/integrations/task-row-indicator";
 import { useTranslation } from "react-i18next";
 
 export function MRRowTaskIndicator({ tasks }: { tasks: TaskMR[] | undefined }) {

apps/web/components/gitlab/my-gitlab/start-task-menu.tsx

@@ -1,14 +1,7 @@
 "use client";
 
-import { IconChevronDown, IconPlus } from "@tabler/icons-react";
-import { Button } from "@kandev/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@kandev/ui/dropdown-menu";
 import type { GitLabTaskPreset } from "./quick-task-launcher";
+import { IntegrationStartTaskMenu } from "@/components/integrations/integration-start-task-menu";
 import { useTranslation } from "react-i18next";
 
 export function StartTaskMenu({
@@ -19,39 +12,12 @@ export function StartTaskMenu({
   onSelect: (preset: GitLabTaskPreset) => void;
 }) {
   const { t } = useTranslation();
-  if (presets.length === 0) return null;
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          size="sm"
-          variant="outline"
-          className="h-11 sm:h-7 gap-1 cursor-pointer"
-          aria-label={t("gitlab:createTask")}
-        >
-          <IconPlus className="h-3.5 w-3.5" />
-          {t("gitlab:task")}
-          <IconChevronDown className="h-3 w-3" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-52">
-        {presets.map((preset) => {
-          const PresetIcon = preset.icon;
-          return (
-            <DropdownMenuItem
-              key={preset.id}
-              className="min-h-11 sm:min-h-8 cursor-pointer gap-2"
-              onSelect={() => onSelect(preset)}
-            >
-              <PresetIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-              <div className="min-w-0">
-                <div className="text-xs font-medium">{preset.label}</div>
-                <div className="truncate text-[11px] text-muted-foreground">{preset.hint}</div>
-              </div>
-            </DropdownMenuItem>
-          );
-        })}
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <IntegrationStartTaskMenu
+      presets={presets}
+      onSelect={onSelect}
+      triggerLabel={t("gitlab:task")}
+      triggerAriaLabel={t("gitlab:createTask")}
+    />
   );
 }