mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
[79d686f0] Add page-scoped refresh button to the navbar (#351)
* [870467e6] Frontend: page-scoped refresh provider, hook, and navbar button (#347) * [55376b8a] Create page-scoped refresh provider and context (#327) * [55376b8a] feat(panel): add page-scoped refresh context and provider * [55376b8a] docs(frontend): add page-refresh-provider component documentation --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> * [a0c02d0f] Add public usePageRefresh hook (#332) * [a0c02d0f] test(hooks): assert usePageRefresh is exported from hooks barrel * [a0c02d0f] feat(hooks): add public usePageRefresh hook with provider and tests * [a0c02d0f] fix(panel): move hook test wrappers to components and rename providers.tsx to unshadow barrel * [a0c02d0f] docs(panel): document usePageRefresh hook and PageRefreshProvider API --------- Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> Co-authored-by: Renn F <rennf93@users.noreply.github.com> * [5f28dd9b] Add navbar refresh button and remove inline dashboard refresh buttons (#336) * [5f28dd9b] Align PageRefreshProvider with active hook API and remove inline dashboard refresh buttons * [5f28dd9b] Remove unused scope-keyed PageRefreshProvider, context, and associated tests * [5f28dd9b] Address QA revision: add header refresh tests, page-scoped label, remove dead provider code and .venv symlink, revert formatting-only changes * [5f28dd9b] Remove remaining inline dashboard refresh buttons and committed .venv symlink * [5f28dd9b] docs(frontend): update page-refresh provider docs and panel README for navbar refresh button * [5f28dd9b] fix(panel): remove .venv symlink, ignore root .venv entries, and thin task-detail page data fetch into useTaskDetail hook * [5f28dd9b] Extract GitBrowser data fetching into useGitBrowser hook and add tests; verify .venv cleanup and task-detail thin hook usage * [5f28dd9b] fix(panel): remove root .venv symlink, restore .gitignore anchored rule, and revert lifecycle.json formatting noise * Delete .venv --------- Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Renn F <rennf93@users.noreply.github.com> * [b8e1de1b] Fix navbar refresh button disabled state when registry is empty (#356) (#358) * [b8e1de1b] fix(panel): derive navbar refresh disabled state from registry, not unused prop PageRefreshProvider now computes `disabled` from whether any refresh callback is currently registered (registry size > 0) instead of a static, never-passed `disabled` prop that left the button permanently enabled. header.tsx now destructures `disabled` from usePageRefresh() and disables the button on `disabled || loading`. Updated the tests that asserted the old always-enabled-by-default behavior and added a new header test asserting the button is disabled with zero registered callbacks. * [b8e1de1b] docs(panel): document PageRefreshProvider disabled state derived from registry Updated documentation to reflect the refactored PageRefreshProvider behavior: the `disabled` state is now derived from whether any refresh callbacks are currently registered (empty registry = disabled), rather than a static `disabled` prop. Clarified in both panel/README.md and the full component guide that the navbar refresh button disables when no callbacks are registered and when a refresh cycle is in progress. Updated API documentation to remove the now-removed `disabled` prop from PageRefreshProviderProps and updated code examples and test coverage descriptions to reflect the new callback-driven semantics. --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> * test(panel): mock usePageRefresh in tests predating the provider Merge-skew: the page-refresh feature makes CommandCenter and the agent detail page call usePageRefresh; three tests merged from master render them without the new provider. Mock the hook module, matching the files' stub-everything style. --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Renn F <rennf93@users.noreply.github.com>
This commit is contained in:
Renzo F
co-authored by
Frontend Developer 1
Frontend Documenter
Frontend Developer 2
Renn F
Frontend Developer 1
Frontend Documenter
Frontend Developer 2
Renn F
parent
ec5323917e
commit
08c02e2251
@@ -1,18 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, Suspense } from "react";
|
||||
import { useSearchParams, useRouter } from "next/navigation";
|
||||
import { useProjects } from "@/hooks/use-projects";
|
||||
import {
|
||||
useGitStatus,
|
||||
useGitLog,
|
||||
useGitBranches,
|
||||
useGitDiff,
|
||||
useGitOperations,
|
||||
} from "@/hooks/use-git";
|
||||
import { BranchType } from "@/types/git";
|
||||
import { Suspense } from "react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Select,
|
||||
@@ -27,257 +16,54 @@ import { GitBranchPanel } from "./git-branch-panel";
|
||||
import { GitLogPanel } from "./git-log-panel";
|
||||
import { GitDiffViewer } from "./git-diff-viewer";
|
||||
import { GitActionsPanel } from "./git-actions-panel";
|
||||
import { GitBranch, RefreshCw, FolderGit2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { getErrorMessage } from "@/lib/api/client";
|
||||
import { GitBranch, FolderGit2 } from "lucide-react";
|
||||
import { useGitBrowser } from "@/hooks/use-git-browser";
|
||||
|
||||
function GitBrowserContent() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
// Read state from URL
|
||||
const projectSlug = searchParams.get("project") || "";
|
||||
const taskId = searchParams.get("task") || "";
|
||||
|
||||
// Fetch projects
|
||||
const {
|
||||
data: projects,
|
||||
isLoading: loadingProjects,
|
||||
error: projectsError,
|
||||
refetch: refetchProjects,
|
||||
} = useProjects();
|
||||
|
||||
// Git hooks - only enabled when project is selected
|
||||
const {
|
||||
data: status,
|
||||
isLoading: loadingStatus,
|
||||
refetch: refetchStatus,
|
||||
} = useGitStatus(projectSlug, taskId, !!projectSlug);
|
||||
const {
|
||||
data: log,
|
||||
isLoading: loadingLog,
|
||||
refetch: refetchLog,
|
||||
} = useGitLog(projectSlug, 20, undefined, !!projectSlug);
|
||||
const {
|
||||
data: branches,
|
||||
isLoading: loadingBranches,
|
||||
refetch: refetchBranches,
|
||||
} = useGitBranches(projectSlug, true, !!projectSlug);
|
||||
const { data: stagedDiff, isLoading: loadingStagedDiff } = useGitDiff(
|
||||
projectSlug,
|
||||
true,
|
||||
undefined,
|
||||
!!projectSlug,
|
||||
);
|
||||
const { data: unstagedDiff, isLoading: loadingUnstagedDiff } = useGitDiff(
|
||||
projectSlug,
|
||||
false,
|
||||
undefined,
|
||||
!!projectSlug,
|
||||
);
|
||||
|
||||
// Git operations
|
||||
const {
|
||||
commit,
|
||||
push,
|
||||
createBranch,
|
||||
checkout,
|
||||
createPR,
|
||||
mergePR,
|
||||
pull,
|
||||
fetch,
|
||||
rebase,
|
||||
} = useGitOperations();
|
||||
|
||||
// Update URL params
|
||||
const updateParams = useCallback(
|
||||
(updates: Record<string, string | null>) => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
Object.entries(updates).forEach(([key, value]) => {
|
||||
if (value) {
|
||||
params.set(key, value);
|
||||
} else {
|
||||
params.delete(key);
|
||||
}
|
||||
});
|
||||
const query = params.toString();
|
||||
router.push(query ? `/git?${query}` : "/git");
|
||||
},
|
||||
[router, searchParams],
|
||||
);
|
||||
|
||||
const handleProjectChange = useCallback(
|
||||
(slug: string) => {
|
||||
updateParams({ project: slug || null, task: null });
|
||||
},
|
||||
[updateParams],
|
||||
);
|
||||
|
||||
const handleRefresh = () => {
|
||||
refetchStatus();
|
||||
refetchLog();
|
||||
refetchBranches();
|
||||
};
|
||||
|
||||
// Operation handlers
|
||||
// Note: agent_id is "ceo" because this panel is used by the CEO
|
||||
const handleCheckout = async (branch: string) => {
|
||||
try {
|
||||
await checkout.mutateAsync({
|
||||
project_slug: projectSlug,
|
||||
branch,
|
||||
agent_id: "ceo",
|
||||
});
|
||||
toast.success(`Checked out ${branch}`);
|
||||
} catch {
|
||||
toast.error("Failed to checkout branch");
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateBranch = async (
|
||||
branchType: BranchType,
|
||||
branchTaskId: string,
|
||||
) => {
|
||||
try {
|
||||
const result = await createBranch.mutateAsync({
|
||||
project_slug: projectSlug,
|
||||
task_id: branchTaskId,
|
||||
branch_type: branchType,
|
||||
agent_id: "ceo",
|
||||
});
|
||||
toast.success(`Created branch ${result.branch_name}`);
|
||||
} catch {
|
||||
toast.error("Failed to create branch");
|
||||
}
|
||||
};
|
||||
|
||||
const handleCommit = async (message: string) => {
|
||||
try {
|
||||
const result = await commit.mutateAsync({
|
||||
project_slug: projectSlug,
|
||||
message,
|
||||
task_id: taskId || undefined,
|
||||
agent_id: "ceo",
|
||||
});
|
||||
toast.success(`Committed: ${result.commit_hash.slice(0, 7)}`);
|
||||
} catch {
|
||||
toast.error("Failed to commit");
|
||||
}
|
||||
};
|
||||
|
||||
const handlePush = async (force?: boolean) => {
|
||||
try {
|
||||
const result = await push.mutateAsync({
|
||||
project_slug: projectSlug,
|
||||
task_id: taskId || undefined,
|
||||
agent_id: "ceo",
|
||||
force,
|
||||
});
|
||||
toast.success(
|
||||
`Pushed ${result.commits_pushed} commits to ${result.branch}`,
|
||||
);
|
||||
} catch {
|
||||
toast.error("Failed to push");
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreatePR = async (title: string, body: string) => {
|
||||
try {
|
||||
const result = await createPR.mutateAsync({
|
||||
project_slug: projectSlug,
|
||||
task_id: taskId || undefined,
|
||||
title,
|
||||
body,
|
||||
agent_id: "ceo",
|
||||
});
|
||||
toast.success(
|
||||
<span>
|
||||
Created PR #{result.pr_number}:{" "}
|
||||
<a
|
||||
href={result.pr_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
View
|
||||
</a>
|
||||
</span>,
|
||||
);
|
||||
} catch {
|
||||
toast.error("Failed to create PR");
|
||||
}
|
||||
};
|
||||
|
||||
const handleMergePR = async (prNumber: number) => {
|
||||
try {
|
||||
const result = await mergePR.mutateAsync({
|
||||
project_slug: projectSlug,
|
||||
pr_number: prNumber,
|
||||
task_id: taskId || undefined,
|
||||
agent_id: "ceo",
|
||||
});
|
||||
toast.success(`Merged PR #${result.pr_number} → ${result.target_branch}`);
|
||||
} catch {
|
||||
toast.error("Failed to merge PR");
|
||||
}
|
||||
};
|
||||
|
||||
const handlePull = async () => {
|
||||
try {
|
||||
const result = await pull.mutateAsync({
|
||||
project_slug: projectSlug,
|
||||
task_id: taskId || undefined,
|
||||
});
|
||||
toast.success(`Pulled: now on ${result.current_branch}`);
|
||||
} catch {
|
||||
toast.error("Failed to pull from remote");
|
||||
}
|
||||
};
|
||||
|
||||
const handleFetch = async () => {
|
||||
try {
|
||||
const result = await fetch.mutateAsync({
|
||||
project_slug: projectSlug,
|
||||
task_id: taskId || undefined,
|
||||
});
|
||||
toast.success(`Fetched: now on ${result.current_branch}`);
|
||||
} catch {
|
||||
toast.error("Failed to fetch from remote");
|
||||
}
|
||||
};
|
||||
|
||||
const handleRebase = async (targetBranch: string) => {
|
||||
try {
|
||||
const result = await rebase.mutateAsync({
|
||||
project_slug: projectSlug,
|
||||
target_branch: targetBranch,
|
||||
task_id: taskId || undefined,
|
||||
agent_id: "ceo",
|
||||
});
|
||||
if (result.conflict) {
|
||||
toast.warning(
|
||||
`Rebase conflicts in: ${result.conflicted_files.join(", ") || "unknown files"}`,
|
||||
);
|
||||
} else {
|
||||
toast.success("Rebase completed successfully");
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(getErrorMessage(error));
|
||||
}
|
||||
};
|
||||
|
||||
// Check offline
|
||||
const isOffline =
|
||||
projectsError &&
|
||||
(projectsError.message?.includes("Network Error") ||
|
||||
(projectsError as { code?: string })?.code === "ERR_NETWORK");
|
||||
taskId,
|
||||
projects,
|
||||
loadingProjects,
|
||||
status,
|
||||
loadingStatus,
|
||||
log,
|
||||
loadingLog,
|
||||
branches,
|
||||
loadingBranches,
|
||||
stagedDiff,
|
||||
loadingStagedDiff,
|
||||
unstagedDiff,
|
||||
loadingUnstagedDiff,
|
||||
isOffline,
|
||||
refresh,
|
||||
handleProjectChange,
|
||||
handleCheckout,
|
||||
handleCreateBranch,
|
||||
handleCommit,
|
||||
handlePush,
|
||||
handleCreatePR,
|
||||
handleMergePR,
|
||||
handlePull,
|
||||
handleFetch,
|
||||
handleRebase,
|
||||
isCommitting,
|
||||
isPushing,
|
||||
isCreatingPR,
|
||||
isMerging,
|
||||
isPulling,
|
||||
isFetching,
|
||||
isRebasing,
|
||||
isCheckingOut,
|
||||
isCreatingBranch,
|
||||
} = useGitBrowser();
|
||||
|
||||
if (isOffline) {
|
||||
return (
|
||||
<OfflineState
|
||||
title="Cannot Connect to Git Service"
|
||||
description="Start the RoboCo orchestrator to access git operations."
|
||||
onRetry={() => refetchProjects()}
|
||||
onRetry={() => void refresh()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -313,12 +99,6 @@ function GitBrowserContent() {
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{projectSlug && (
|
||||
<Button variant="outline" onClick={handleRefresh}>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Refresh
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -354,13 +134,13 @@ function GitBrowserContent() {
|
||||
onPull={handlePull}
|
||||
onFetch={handleFetch}
|
||||
onRebase={handleRebase}
|
||||
isCommitting={commit.isPending}
|
||||
isPushing={push.isPending}
|
||||
isCreatingPR={createPR.isPending}
|
||||
isMerging={mergePR.isPending}
|
||||
isPulling={pull.isPending}
|
||||
isFetching={fetch.isPending}
|
||||
isRebasing={rebase.isPending}
|
||||
isCommitting={isCommitting}
|
||||
isPushing={isPushing}
|
||||
isCreatingPR={isCreatingPR}
|
||||
isMerging={isMerging}
|
||||
isPulling={isPulling}
|
||||
isFetching={isFetching}
|
||||
isRebasing={isRebasing}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -371,8 +151,8 @@ function GitBrowserContent() {
|
||||
isLoading={loadingBranches}
|
||||
onCheckout={handleCheckout}
|
||||
onCreateBranch={handleCreateBranch}
|
||||
isCheckingOut={checkout.isPending}
|
||||
isCreating={createBranch.isPending}
|
||||
isCheckingOut={isCheckingOut}
|
||||
isCreating={isCreatingBranch}
|
||||
/>
|
||||
<GitLogPanel log={log} isLoading={loadingLog} />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user