refactor: move integrations to top-level settings with install-wide configs (#787)

* refactor: move integrations to top-level settings with install-wide configs

Jira and Linear configurations are now install-wide singletons rather than
per-workspace duplicates, and the GitHub/Jira/Linear settings pages live
under /settings/integrations instead of being nested inside each workspace.
Issue and PR watchers stay per-workspace via a workspace switcher inside
each integration page. Backend ships one-shot migrations that promote the
most-recently-updated row and copy its secret onto the new global key.

* fix: address review feedback on integrations refactor

Fix migration crash on installs whose jira_configs predate the auth-health
columns by selecting only guaranteed-present legacy columns and falling back
to defaults for the rest. Cover the empty-legacy-table and pre-health-columns
upgrade paths with new store tests.

On the frontend, refactor useIntegrationEnabled to take string parameters
instead of an inline options object so getSnapshot stays referentially stable
across renders, and stop dispatching a misleading no-op sync event when
localStorage.setItem fails in private mode.

* fix: hydrate workspace list on integration settings pages

The integration pages wrapped their content in a fresh StateProvider, which
created a nested store scope with an empty initial state and shadowed the
settings layout's hydrated workspace list. WorkspaceScopedSection then saw
zero workspaces and rendered the "Create a workspace to configure this
integration" empty state even when the user had workspaces.

Drop the redundant StateProvider from the jira and linear pages so they share
the layout's store. The github page switches to StateHydrator so it can still
seed the GitHub OAuth status without resetting the rest of the store.

* refactor(integrations): flatten watcher tables, pick workspace in create dialog

Hiding watchers behind a workspace switcher made the list invisible at a
glance — a user with multiple workspaces had to flip between each one to
see what was configured. Replace the switcher with a flat table that lists
every watch across every workspace, with a Workspace column for context, and
move workspace selection into the create dialog so the user picks once when
the watcher is born.

Backend: jira list-issue-watches and github list-review-watches /
list-issue-watches accept the workspace_id query param as optional; when
omitted, the corresponding store ListAll* method returns rows across every
workspace. Per-row mutations still require workspace_id as the IDOR guard.

Frontend: useReviewWatches / useIssueWatches / useJiraIssueWatches gain a
three-state contract — string for one workspace, undefined for all
workspaces, null to skip fetching. Watch tables grow an optional
showWorkspace column. Watch dialogs accept an optional workspaceId prop;
when absent, the dialog renders a workspace dropdown for the create flow
(disabled when editing existing rows so refs aren't orphaned). Github
review-watch-dialog crossed the 600-line lint cap so the prompt editor
moved to review-watch-prompt-field.tsx.

* fix(integrations): make watcher step dropdown reactive across workspace switches

Switching to a workspace whose workflows had to be fetched left the workflow
step dropdown stuck — the user could pick a workflow but the step Select
either showed the previous workflow's steps or appeared inert. The cause was
the per-dialog useWorkflowSteps hook deferring its empty-state reset via
Promise.resolve().then(() => setSteps([])) to dodge a setState-in-effect
lint rule, which let stale steps survive into the next render and gave Radix
nothing to anchor the popover to during the in-flight fetch.

Hoist the hook into a shared useWorkflowSteps that resets via React's
official setState-during-render pattern, exposes a loading flag, and returns
a stepPlaceholder helper so the Select can render "Loading steps…" or "No
steps in this workflow" instead of an empty popover. The Step Select is now
also disabled while loading or when there are no steps, making the state of
the dropdown unambiguous.

* fix: address PR review feedback on integrations refactor

Backend:
- linear migration: add column-presence guard mirroring the Jira fix so
  installs that upgraded from the original Linear schema (without org_slug
  / last_checked_at / last_ok / last_error) don't crash startup with
  "no such column"; add TestStore_MigrateLegacyPerWorkspaceTable_PreHealthColumns
- jira/handlers.go: drop the now-unused errMsgWorkspaceIDRequired constant
  that was failing golangci-lint
- jira/mock_controller_test.go (new): cover setAuthHealth happy-path and
  invalid-JSON-rejection so the singleton-shaped payload is locked in

Frontend:
- useIntegrationAvailable: gate the auth-health probe on loaded && enabled
  so disabled integrations don't poll /config every 90s
- use-workflow-steps: initialize loading to !!workflowId so edit-mode opens
  show "Loading steps…" instead of "No steps in this workflow" before the
  first fetch lands
- use-workflow-steps.test.ts (new): cover the empty/non-empty workflowId,
  workflow switch, fetch error, and stepPlaceholder branches
- use-linear-enabled.test: tighten the legacy-key migration assertion to
  pin the migrated value rather than just verifying key cleanup

---------

Co-authored-by: Kandev Agent <agent@kandev.dev>
This commit is contained in:
João Salavisa
2026-05-03 10:22:57 +01:00
committed by GitHub
parent 9e8e9d7dde
commit bb36cb9e01
93 changed files with 2729 additions and 1881 deletions
+59 -43
View File
@@ -18,13 +18,10 @@ import { DefaultQueriesSection } from "./default-queries-section";
import { PRStatsPanel } from "./pr-stats";
import { useReviewWatches } from "@/hooks/domains/github/use-review-watches";
import { useIssueWatches } from "@/hooks/domains/github/use-issue-watches";
import { WorkspaceScopedSection } from "@/components/integrations/workspace-scoped-section";
import type { ReviewWatch, IssueWatch } from "@/lib/types/github";
type GitHubSettingsProps = {
workspaceId: string;
};
function useWatchActions(workspaceId: string | null) {
function useWatchActions(workspaceId?: string | null) {
const { items: watches, create, update, remove, trigger } = useReviewWatches(workspaceId);
const { toast } = useToast();
@@ -78,7 +75,7 @@ function useWatchActions(workspaceId: string | null) {
return { watches, create, update, handleDelete, handleTrigger, handleToggleEnabled };
}
function useIssueWatchActions(workspaceId: string | null) {
function useIssueWatchActions(workspaceId?: string | null) {
const { items: watches, create, update, remove, trigger } = useIssueWatches(workspaceId);
const { toast } = useToast();
@@ -132,49 +129,67 @@ function useIssueWatchActions(workspaceId: string | null) {
return { watches, create, update, handleDelete, handleTrigger, handleToggleEnabled };
}
export function GitHubSettings({ workspaceId }: GitHubSettingsProps) {
export function GitHubConnectionSection() {
return (
<>
<div>
<h2 className="text-2xl font-bold flex items-center gap-2">
<IconBrandGithub className="h-6 w-6" />
GitHub Integration
</h2>
<p className="text-sm text-muted-foreground mt-1">
Connect Kandev to GitHub. Authentication is shared across all workspaces; PR/issue
watchers and presets are configured per workspace.
</p>
</div>
<Separator />
<SettingsSection title="Connection Status" description="GitHub authentication status">
<Card>
<CardContent className="py-3">
<GitHubStatusCard />
</CardContent>
</Card>
</SettingsSection>
</>
);
}
// PerWorkspaceSection wraps the still-per-workspace surfaces (action presets,
// PR analytics) under a workspace switcher. Watchers don't go in here — they
// list flat across every workspace via their own sections.
function PerWorkspaceSection({ workspaceId }: { workspaceId: string }) {
return (
<div className="space-y-8">
<ActionPresetsSection workspaceId={workspaceId} />
<SettingsSection title="PR Analytics" description="Pull request activity for this workspace.">
<PRStatsPanel workspaceId={workspaceId} />
</SettingsSection>
</div>
);
}
export function GitHubIntegrationPage() {
return (
<TooltipProvider>
<div className="space-y-8">
<div>
<h2 className="text-2xl font-bold flex items-center gap-2">
<IconBrandGithub className="h-6 w-6" />
GitHub Integration
</h2>
<p className="text-sm text-muted-foreground mt-1">
Configure GitHub PR monitoring, issue tracking, and review queue automation.
</p>
</div>
<Separator />
<SettingsSection title="Connection Status" description="GitHub authentication status">
<Card>
<CardContent className="py-3">
<GitHubStatusCard />
</CardContent>
</Card>
</SettingsSection>
<ReviewWatchSection workspaceId={workspaceId} />
<IssueWatchSection workspaceId={workspaceId} />
<ActionPresetsSection workspaceId={workspaceId} />
<GitHubConnectionSection />
<ReviewWatchSection />
<IssueWatchSection />
<WorkspaceScopedSection label="Presets and analytics for">
{(ws) => <PerWorkspaceSection key={ws} workspaceId={ws} />}
</WorkspaceScopedSection>
<DefaultQueriesSection />
<SettingsSection
title="PR Analytics"
description="Pull request activity for this workspace."
>
<PRStatsPanel workspaceId={workspaceId} />
</SettingsSection>
</div>
</TooltipProvider>
);
}
function ReviewWatchSection({ workspaceId }: { workspaceId: string }) {
// ReviewWatchSection lists every review watch across every workspace in a
// single flat table. Pass `undefined` to the hook so it fetches all rows; the
// dialog's create flow asks the user to pick the workspace.
function ReviewWatchSection() {
const { watches, create, update, handleDelete, handleTrigger, handleToggleEnabled } =
useWatchActions(workspaceId);
useWatchActions(undefined);
const { toast } = useToast();
const [dialogOpen, setDialogOpen] = useState(false);
const [editingWatch, setEditingWatch] = useState<ReviewWatch | null>(null);
@@ -207,6 +222,7 @@ function ReviewWatchSection({ workspaceId }: { workspaceId: string }) {
<CardContent className="p-0">
<ReviewWatchTable
watches={watches}
showWorkspace
onEdit={handleEdit}
onDelete={handleDelete}
onTrigger={handleTrigger}
@@ -219,7 +235,7 @@ function ReviewWatchSection({ workspaceId }: { workspaceId: string }) {
open={dialogOpen}
onOpenChange={setDialogOpen}
watch={editingWatch}
workspaceId={workspaceId}
// No workspaceId — dialog shows a workspace picker for new watches.
onCreate={async (req) => {
await create(req);
toast({ description: "Review watch created", variant: "success" });
@@ -233,8 +249,8 @@ function ReviewWatchSection({ workspaceId }: { workspaceId: string }) {
);
}
function IssueWatchSection({ workspaceId }: { workspaceId: string }) {
const issueActions = useIssueWatchActions(workspaceId);
function IssueWatchSection() {
const issueActions = useIssueWatchActions(undefined);
const { toast } = useToast();
const [dialogOpen, setDialogOpen] = useState(false);
const [editingWatch, setEditingIssueWatch] = useState<IssueWatch | null>(null);
@@ -267,6 +283,7 @@ function IssueWatchSection({ workspaceId }: { workspaceId: string }) {
<CardContent className="p-0">
<IssueWatchTable
watches={issueActions.watches}
showWorkspace
onEdit={handleEdit}
onDelete={issueActions.handleDelete}
onTrigger={issueActions.handleTrigger}
@@ -279,7 +296,6 @@ function IssueWatchSection({ workspaceId }: { workspaceId: string }) {
open={dialogOpen}
onOpenChange={setDialogOpen}
watch={editingWatch}
workspaceId={workspaceId}
onCreate={async (req) => {
await issueActions.create(req);
toast({ description: "Issue watch created", variant: "success" });