merge: resolve v1.22.0 conflicts with custom
This commit is contained in:
@@ -0,0 +1,684 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { getRegisteredRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
|
||||
import { useProjectsStore } from '@/stores/useProjectsStore';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { useGitLabAuthStore } from '@/stores/useGitLabAuthStore';
|
||||
import { validateWorktreeCreate } from '@/lib/worktrees/worktreeManager';
|
||||
import { SortableTabsStrip } from '@/components/ui/sortable-tabs-strip';
|
||||
import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
|
||||
import { Icon } from "@/components/icon/Icon";
|
||||
import { useDebouncedValue } from '@/hooks/useDebouncedValue';
|
||||
import type {
|
||||
GitLabIssueSummary,
|
||||
GitLabMergeRequestSummary,
|
||||
} from '@/lib/api/types';
|
||||
import type { ProjectRef } from '@/lib/worktrees/worktreeManager';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
|
||||
type GitLabTab = 'issues' | 'mrs';
|
||||
|
||||
interface GitLabIntegrationDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSelect: (result: {
|
||||
type: 'issue';
|
||||
number: number;
|
||||
title: string;
|
||||
url: string;
|
||||
} | {
|
||||
type: 'mr';
|
||||
number: number;
|
||||
title: string;
|
||||
url: string;
|
||||
sourceBranch: string;
|
||||
includeDiff: boolean;
|
||||
} | null) => void;
|
||||
}
|
||||
|
||||
interface ValidationResult {
|
||||
isValid: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export function GitLabIntegrationDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
onSelect,
|
||||
}: GitLabIntegrationDialogProps) {
|
||||
const { t } = useI18n();
|
||||
const isMobile = useUIStore((state) => state.isMobile);
|
||||
const gitlab = getRegisteredRuntimeAPIs()?.gitlab;
|
||||
const gitlabAuthStatus = useGitLabAuthStore((state) => state.status);
|
||||
const gitlabAuthChecked = useGitLabAuthStore((state) => state.hasChecked);
|
||||
const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
|
||||
const setSettingsPage = useUIStore((state) => state.setSettingsPage);
|
||||
const activeProject = useProjectsStore((state) => state.getActiveProject());
|
||||
|
||||
const projectDirectory = activeProject?.path ?? null;
|
||||
const projectRef: ProjectRef | null = React.useMemo(() => {
|
||||
if (projectDirectory && activeProject) {
|
||||
return { id: activeProject.id, path: projectDirectory };
|
||||
}
|
||||
return null;
|
||||
}, [activeProject, projectDirectory]);
|
||||
|
||||
// State
|
||||
const [activeTab, setActiveTab] = React.useState<GitLabTab>('issues');
|
||||
const [searchQuery, setSearchQuery] = React.useState('');
|
||||
const [issues, setIssues] = React.useState<GitLabIssueSummary[]>([]);
|
||||
const [mrs, setMrs] = React.useState<GitLabMergeRequestSummary[]>([]);
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
const [loadingMore, setLoadingMore] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
const [selectedIssue, setSelectedIssue] = React.useState<GitLabIssueSummary | null>(null);
|
||||
const [selectedMr, setSelectedMr] = React.useState<GitLabMergeRequestSummary | null>(null);
|
||||
const [includeDiff, setIncludeDiff] = React.useState(false);
|
||||
const [validations, setValidations] = React.useState<Map<string, ValidationResult>>(new Map());
|
||||
const [page, setPage] = React.useState(1);
|
||||
const [hasMore, setHasMore] = React.useState(false);
|
||||
|
||||
const debouncedSearchQuery = useDebouncedValue(searchQuery, 350);
|
||||
|
||||
const loadData = React.useCallback(async (query?: string) => {
|
||||
if (!projectDirectory || !gitlab) return;
|
||||
if (gitlabAuthChecked && gitlabAuthStatus?.connected === false) return;
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setPage(1);
|
||||
setHasMore(false);
|
||||
|
||||
try {
|
||||
if (activeTab === 'issues' && gitlab.issuesList) {
|
||||
const result = await gitlab.issuesList(projectDirectory, { page: 1, query });
|
||||
if (result.connected === false) {
|
||||
setError(t('session.gitlabIntegration.error.notConnected'));
|
||||
setIssues([]);
|
||||
} else {
|
||||
setIssues(result.issues ?? []);
|
||||
setPage(result.page ?? 1);
|
||||
setHasMore(Boolean(result.hasMore));
|
||||
}
|
||||
} else if (activeTab === 'mrs' && gitlab.mrsList) {
|
||||
const result = await gitlab.mrsList(projectDirectory, { page: 1, query });
|
||||
if (result.connected === false) {
|
||||
setError(t('session.gitlabIntegration.error.notConnected'));
|
||||
setMrs([]);
|
||||
} else {
|
||||
setMrs(result.mrs ?? []);
|
||||
setPage(result.page ?? 1);
|
||||
setHasMore(Boolean(result.hasMore));
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : t('session.gitlabIntegration.error.loadDataFailed'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [projectDirectory, gitlab, gitlabAuthChecked, gitlabAuthStatus, activeTab, t]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!open || !projectDirectory) return;
|
||||
if (gitlabAuthChecked && gitlabAuthStatus?.connected === false) return;
|
||||
if (!gitlab) return;
|
||||
if (!debouncedSearchQuery.trim()) {
|
||||
void loadData();
|
||||
return;
|
||||
}
|
||||
|
||||
const controller = new AbortController();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setPage(1);
|
||||
setHasMore(false);
|
||||
|
||||
const apiCall = activeTab === 'issues' && gitlab.issuesList
|
||||
? gitlab.issuesList(projectDirectory, { page: 1, query: debouncedSearchQuery.trim() })
|
||||
: activeTab === 'mrs' && gitlab.mrsList
|
||||
? gitlab.mrsList(projectDirectory, { page: 1, query: debouncedSearchQuery.trim() })
|
||||
: null;
|
||||
|
||||
if (!apiCall) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
apiCall
|
||||
.then((result) => {
|
||||
if (controller.signal.aborted) return;
|
||||
if ('issues' in result) {
|
||||
if (result.connected === false) {
|
||||
setError(t('session.gitlabIntegration.error.notConnected'));
|
||||
setIssues([]);
|
||||
} else {
|
||||
setIssues(result.issues ?? []);
|
||||
setPage(result.page ?? 1);
|
||||
setHasMore(Boolean(result.hasMore));
|
||||
}
|
||||
} else if ('mrs' in result) {
|
||||
if (result.connected === false) {
|
||||
setError(t('session.gitlabIntegration.error.notConnected'));
|
||||
setMrs([]);
|
||||
} else {
|
||||
setMrs(result.mrs ?? []);
|
||||
setPage(result.page ?? 1);
|
||||
setHasMore(Boolean(result.hasMore));
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (controller.signal.aborted) return;
|
||||
setError(err instanceof Error ? err.message : t('session.gitlabIntegration.error.loadDataFailed'));
|
||||
})
|
||||
.finally(() => {
|
||||
if (!controller.signal.aborted) setLoading(false);
|
||||
});
|
||||
|
||||
return () => controller.abort();
|
||||
}, [open, projectDirectory, gitlab, gitlabAuthChecked, gitlabAuthStatus, activeTab, debouncedSearchQuery, loadData, t]);
|
||||
|
||||
const loadMore = React.useCallback(async () => {
|
||||
if (!projectDirectory || !gitlab) return;
|
||||
if (loading || loadingMore) return;
|
||||
if (!hasMore) return;
|
||||
|
||||
setLoadingMore(true);
|
||||
|
||||
try {
|
||||
const nextPage = page + 1;
|
||||
|
||||
if (activeTab === 'issues' && gitlab.issuesList) {
|
||||
const result = debouncedSearchQuery.trim()
|
||||
? await gitlab.issuesList(projectDirectory, { page: nextPage, query: debouncedSearchQuery.trim() })
|
||||
: await gitlab.issuesList(projectDirectory, { page: nextPage });
|
||||
if (result.connected !== false) {
|
||||
setIssues(prev => [...prev, ...(result.issues ?? [])]);
|
||||
setPage(result.page ?? nextPage);
|
||||
setHasMore(Boolean(result.hasMore));
|
||||
}
|
||||
} else if (activeTab === 'mrs' && gitlab.mrsList) {
|
||||
const result = debouncedSearchQuery.trim()
|
||||
? await gitlab.mrsList(projectDirectory, { page: nextPage, query: debouncedSearchQuery.trim() })
|
||||
: await gitlab.mrsList(projectDirectory, { page: nextPage });
|
||||
if (result.connected !== false) {
|
||||
setMrs(prev => [...prev, ...(result.mrs ?? [])]);
|
||||
setPage(result.page ?? nextPage);
|
||||
setHasMore(Boolean(result.hasMore));
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Silently fail on load more errors
|
||||
} finally {
|
||||
setLoadingMore(false);
|
||||
}
|
||||
}, [projectDirectory, gitlab, activeTab, page, hasMore, loading, loadingMore, debouncedSearchQuery]);
|
||||
|
||||
// Reset state when dialog opens/closes
|
||||
React.useEffect(() => {
|
||||
if (!open) {
|
||||
setActiveTab('issues');
|
||||
setSearchQuery('');
|
||||
setIssues([]);
|
||||
setMrs([]);
|
||||
setSelectedIssue(null);
|
||||
setSelectedMr(null);
|
||||
setIncludeDiff(false);
|
||||
setError(null);
|
||||
setValidations(new Map());
|
||||
setPage(1);
|
||||
setHasMore(false);
|
||||
return;
|
||||
}
|
||||
|
||||
void loadData();
|
||||
}, [open, loadData]);
|
||||
|
||||
// Validate branches for worktree creation
|
||||
const validateBranch = React.useCallback(async (branchName: string) => {
|
||||
if (!projectRef || !branchName) return;
|
||||
|
||||
// Check cache first
|
||||
if (validations.has(branchName)) return;
|
||||
|
||||
try {
|
||||
const result = await validateWorktreeCreate(projectRef, {
|
||||
mode: 'new',
|
||||
branchName,
|
||||
worktreeName: branchName,
|
||||
});
|
||||
|
||||
const blockingError = result.errors.find((entry) => entry.code === 'branch_in_use');
|
||||
|
||||
setValidations(prev => new Map(prev).set(branchName, {
|
||||
isValid: !blockingError,
|
||||
error: blockingError
|
||||
? t(blockingError.code === 'branch_exists'
|
||||
? 'session.gitlabIntegration.validation.branchAlreadyExists'
|
||||
: 'session.gitlabIntegration.validation.branchAlreadyCheckedOut')
|
||||
: null,
|
||||
}));
|
||||
} catch {
|
||||
setValidations(prev => new Map(prev).set(branchName, {
|
||||
isValid: false,
|
||||
error: t('session.gitlabIntegration.validation.failed'),
|
||||
}));
|
||||
}
|
||||
}, [projectRef, validations, t]);
|
||||
|
||||
// Validate MR branches when loaded
|
||||
React.useEffect(() => {
|
||||
if (!open || activeTab !== 'mrs') return;
|
||||
|
||||
mrs.forEach(mr => {
|
||||
if (mr.sourceBranch) {
|
||||
void validateBranch(mr.sourceBranch);
|
||||
}
|
||||
});
|
||||
}, [open, activeTab, mrs, validateBranch]);
|
||||
|
||||
// GitLab connection check
|
||||
const isGitLabConnected = gitlabAuthChecked && gitlabAuthStatus?.connected === true;
|
||||
|
||||
const openGitLabSettings = () => {
|
||||
setSettingsPage('git');
|
||||
setSettingsDialogOpen(true);
|
||||
};
|
||||
|
||||
// Handle selection
|
||||
const handleSelectIssue = (issue: GitLabIssueSummary) => {
|
||||
setSelectedIssue(issue);
|
||||
setSelectedMr(null);
|
||||
};
|
||||
|
||||
const handleSelectMr = (mr: GitLabMergeRequestSummary) => {
|
||||
setSelectedMr(mr);
|
||||
setSelectedIssue(null);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (selectedIssue) {
|
||||
onSelect({
|
||||
type: 'issue',
|
||||
number: selectedIssue.number,
|
||||
title: selectedIssue.title,
|
||||
url: selectedIssue.url,
|
||||
});
|
||||
} else if (selectedMr) {
|
||||
onSelect({
|
||||
type: 'mr',
|
||||
number: selectedMr.number,
|
||||
title: selectedMr.title,
|
||||
url: selectedMr.url,
|
||||
sourceBranch: selectedMr.sourceBranch,
|
||||
includeDiff,
|
||||
});
|
||||
}
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setSelectedIssue(null);
|
||||
setSelectedMr(null);
|
||||
setIncludeDiff(false);
|
||||
};
|
||||
|
||||
// Check if selection is valid
|
||||
const canConfirm = selectedIssue || (selectedMr && validations.get(selectedMr.sourceBranch)?.isValid !== false);
|
||||
|
||||
// Check if MR is blocked
|
||||
const isMrBlocked = (mr: GitLabMergeRequestSummary): boolean => {
|
||||
if (!mr.sourceBranch) return true;
|
||||
const validation = validations.get(mr.sourceBranch);
|
||||
return validation?.isValid === false;
|
||||
};
|
||||
|
||||
// Content for the dialog (shared between mobile and desktop)
|
||||
const dialogContent = (
|
||||
<>
|
||||
{!isGitLabConnected ? (
|
||||
<div className="flex-1 flex flex-col items-center justify-center p-8 gap-4">
|
||||
<Icon name="gitlab" className="h-12 w-12 text-muted-foreground" />
|
||||
<div className="text-center">
|
||||
<p className="typography-ui-label text-foreground">{t('session.gitlabIntegration.connect.title')}</p>
|
||||
<p className="typography-small text-muted-foreground mt-1">
|
||||
{t('session.gitlabIntegration.connect.description')}
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={openGitLabSettings} size="sm">{t('session.gitlabIntegration.connect.action')}</Button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Search */}
|
||||
<div className="relative mt-2">
|
||||
<Icon name="search" className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder={activeTab === 'issues'
|
||||
? t('session.gitlabIntegration.search.issuesPlaceholder')
|
||||
: t('session.gitlabIntegration.search.mrsPlaceholder')}
|
||||
className="h-8 pl-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* List Content */}
|
||||
<div className="mt-2 h-[300px] overflow-hidden">
|
||||
<div className="h-full overflow-y-auto">
|
||||
{/* Loading */}
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<Icon name="loader-4" className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="flex items-center gap-2 p-2 rounded-md bg-destructive/10 text-destructive">
|
||||
<Icon name="error-warning" className="h-4 w-4" />
|
||||
<span className="typography-small">{error}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Issues List */}
|
||||
{!loading && !error && activeTab === 'issues' && (
|
||||
<div className="space-y-0.5 min-h-full">
|
||||
{issues.length > 0 ? (
|
||||
issues.map(issue => (
|
||||
<button
|
||||
key={issue.number}
|
||||
onClick={() => handleSelectIssue(issue)}
|
||||
className={cn(
|
||||
'w-full text-left px-2 py-1.5 rounded transition-colors',
|
||||
selectedIssue?.number === issue.number
|
||||
? 'bg-interactive-selection text-interactive-selection-foreground'
|
||||
: 'hover:bg-interactive-hover'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-muted-foreground shrink-0 typography-micro">#{issue.number}</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="typography-small line-clamp-2">{issue.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-[300px] text-center typography-small text-muted-foreground">
|
||||
{t('session.gitlabIntegration.empty.noIssuesFound')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasMore && !loadingMore && (
|
||||
<div className="flex justify-center pt-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => void loadMore()}
|
||||
className="h-7 text-xs"
|
||||
>
|
||||
{t('session.gitlabIntegration.actions.loadMore')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{loadingMore && (
|
||||
<div className="flex items-center justify-center py-2">
|
||||
<Icon name="loader-4" className="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* MRs List */}
|
||||
{!loading && !error && activeTab === 'mrs' && (
|
||||
<div className="space-y-0.5 min-h-full">
|
||||
{mrs.length > 0 ? (
|
||||
mrs.map(mr => {
|
||||
const blocked = isMrBlocked(mr);
|
||||
const validation = mr.sourceBranch ? validations.get(mr.sourceBranch) : undefined;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={mr.number}
|
||||
onClick={() => !blocked && handleSelectMr(mr)}
|
||||
disabled={blocked}
|
||||
className={cn(
|
||||
'w-full text-left px-2 py-1.5 rounded transition-colors',
|
||||
selectedMr?.number === mr.number
|
||||
? 'bg-interactive-selection text-interactive-selection-foreground'
|
||||
: blocked
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: 'hover:bg-interactive-hover'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-muted-foreground shrink-0 typography-micro">!{mr.number}</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="typography-small line-clamp-1">{mr.title}</span>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className="typography-micro text-muted-foreground">
|
||||
{mr.sourceBranch} → {mr.targetBranch}
|
||||
</span>
|
||||
{mr.draft && (
|
||||
<span className="typography-micro px-1 py-0.5 rounded bg-status-info/10 text-status-info">
|
||||
{t('session.gitlabIntegration.draftBadge')}
|
||||
</span>
|
||||
)}
|
||||
{blocked && validation?.error && (
|
||||
<span className="typography-micro text-destructive">
|
||||
{validation.error}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-[300px] text-center typography-small text-muted-foreground">
|
||||
{t('session.gitlabIntegration.empty.noMergeRequestsFound')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasMore && !loadingMore && (
|
||||
<div className="flex justify-center pt-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => void loadMore()}
|
||||
className="h-7 text-xs"
|
||||
>
|
||||
{t('session.gitlabIntegration.actions.loadMore')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{loadingMore && (
|
||||
<div className="flex items-center justify-center py-2">
|
||||
<Icon name="loader-4" className="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
// Footer content
|
||||
const footerContent = (
|
||||
<div className={cn(
|
||||
'w-full',
|
||||
isMobile ? 'flex flex-col gap-2' : 'flex flex-row items-center'
|
||||
)}>
|
||||
{/* Left side: Selected Item / Checkbox */}
|
||||
<div className={cn(
|
||||
'flex items-center gap-4',
|
||||
isMobile ? 'w-full justify-center order-1' : 'flex-1'
|
||||
)}>
|
||||
{/* Selected Issue/MR display - hidden on mobile (shown in header instead) */}
|
||||
{!isMobile && (selectedIssue || selectedMr) && (
|
||||
<div className="flex items-center gap-2 px-2 h-8 rounded-md bg-muted/50 border border-border/50">
|
||||
<Icon name="check" className="h-3.5 w-3.5 text-status-success shrink-0" />
|
||||
<span className="typography-small truncate max-w-[150px]">
|
||||
{selectedIssue
|
||||
? t('session.gitlabIntegration.selected.issueNumber', { number: selectedIssue.number })
|
||||
: t('session.gitlabIntegration.selected.mrNumber', { number: selectedMr?.number ?? '' })}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleClear}
|
||||
className="text-muted-foreground hover:text-foreground shrink-0 p-0.5 rounded hover:bg-muted transition-colors"
|
||||
>
|
||||
<Icon name="close" className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Include Diff Checkbox - only show when MR tab is active and MR is selected */}
|
||||
{activeTab === 'mrs' && selectedMr && (
|
||||
<label className="flex items-center gap-2 cursor-pointer h-8">
|
||||
<Checkbox
|
||||
checked={includeDiff}
|
||||
onChange={(checked) => setIncludeDiff(checked)}
|
||||
ariaLabel={t('session.gitlabIntegration.includeDiffAria')}
|
||||
/>
|
||||
<span className="typography-small text-foreground">
|
||||
{t('session.gitlabIntegration.includeDiff')}
|
||||
</span>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right side: Buttons */}
|
||||
<div className={cn(
|
||||
'flex gap-2',
|
||||
isMobile ? 'w-full order-2' : 'justify-end'
|
||||
)}>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onOpenChange(false)}
|
||||
className={cn(isMobile && 'flex-1')}
|
||||
>
|
||||
{t('session.gitlabIntegration.actions.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleConfirm}
|
||||
disabled={!canConfirm}
|
||||
className={cn(isMobile && 'flex-1')}
|
||||
>
|
||||
{t('session.gitlabIntegration.actions.select')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isMobile ? (
|
||||
<MobileOverlayPanel
|
||||
open={open}
|
||||
title={t('session.gitlabIntegration.title')}
|
||||
onClose={() => onOpenChange(false)}
|
||||
footer={!isGitLabConnected ? undefined : footerContent}
|
||||
renderHeader={(closeButton) => (
|
||||
<div className="flex flex-col gap-2 px-3 py-2 border-b border-border/40">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="typography-ui-label font-semibold text-foreground">{t('session.gitlabIntegration.title')}</h2>
|
||||
{closeButton}
|
||||
</div>
|
||||
{/* Tabs - using SortableTabsStrip */}
|
||||
<div className="w-full">
|
||||
<SortableTabsStrip
|
||||
items={[
|
||||
{ id: 'issues', label: t('session.gitlabIntegration.tabs.issues'), icon: <Icon name="gitlab" className="h-3.5 w-3.5" /> },
|
||||
{ id: 'mrs', label: t('session.gitlabIntegration.tabs.mergeRequests'), icon: <Icon name="gitlab" className="h-3.5 w-3.5" /> },
|
||||
]}
|
||||
activeId={activeTab}
|
||||
onSelect={(id) => {
|
||||
setActiveTab(id as GitLabTab);
|
||||
setSearchQuery('');
|
||||
}}
|
||||
variant="active-pill"
|
||||
layoutMode="fit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Selected Item Inline Display */}
|
||||
{(selectedIssue || selectedMr) && (
|
||||
<div className="flex items-center gap-2 px-2 py-1 rounded-md bg-muted/50 border border-border/50">
|
||||
<Icon name="check" className="h-3.5 w-3.5 text-status-success shrink-0" />
|
||||
<span className="typography-small truncate flex-1">
|
||||
{selectedIssue
|
||||
? t('session.gitlabIntegration.selected.issueNumber', { number: selectedIssue.number })
|
||||
: t('session.gitlabIntegration.selected.mrNumber', { number: selectedMr?.number ?? '' })}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleClear}
|
||||
className="text-muted-foreground hover:text-foreground shrink-0 p-0.5 rounded hover:bg-muted transition-colors"
|
||||
>
|
||||
<Icon name="close" className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
{dialogContent}
|
||||
</MobileOverlayPanel>
|
||||
) : (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl max-h-[70vh] flex flex-col">
|
||||
<DialogHeader className="flex flex-row items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<DialogTitle className="flex items-center gap-2 shrink-0">
|
||||
<Icon name="gitlab" className="h-5 w-5" />
|
||||
{t('session.gitlabIntegration.title')}
|
||||
</DialogTitle>
|
||||
|
||||
{/* Tabs - using SortableTabsStrip */}
|
||||
<div className="w-[220px]">
|
||||
<SortableTabsStrip
|
||||
items={[
|
||||
{ id: 'issues', label: t('session.gitlabIntegration.tabs.issues'), icon: <Icon name="gitlab" className="h-3.5 w-3.5" /> },
|
||||
{ id: 'mrs', label: t('session.gitlabIntegration.tabs.mergeRequests'), icon: <Icon name="gitlab" className="h-3.5 w-3.5" /> },
|
||||
]}
|
||||
activeId={activeTab}
|
||||
onSelect={(id) => {
|
||||
setActiveTab(id as GitLabTab);
|
||||
setSearchQuery('');
|
||||
}}
|
||||
variant="active-pill"
|
||||
layoutMode="fit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
{dialogContent}
|
||||
|
||||
{/* Footer */}
|
||||
<DialogFooter className="mt-1">
|
||||
{footerContent}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user