feat(KB-094): redesign GitHub import modal
- Redesign GitHubImportModal layout with improved UI/UX\n- Add comprehensive tests covering all modal states\n- Update import modal documentation in README\n- Add CSS styling for polished modal appearance\n- Include changeset for patch release
This commit is contained in:
gsxdsm
@@ -167,135 +167,260 @@ export function GitHubImportModal({ isOpen, onClose, onImport, tasks }: GitHubIm
|
||||
const hasRemotes = remotes.length > 0;
|
||||
const singleRemote = remotes.length === 1;
|
||||
const multipleRemotes = remotes.length > 1;
|
||||
const repositoryName = owner.trim() && repo.trim() ? `${owner.trim()}/${repo.trim()}` : "No repository selected";
|
||||
const importedIssueCount = issues.filter((issue) => importedUrls.has(issue.html_url)).length;
|
||||
const isEmptyState = error === "No open issues found";
|
||||
const isResultsError = Boolean(error) && !isEmptyState && issues.length === 0 && !loading;
|
||||
const hasResultsContent = loading || issues.length > 0 || isEmptyState || isResultsError;
|
||||
const showInlineErrorBanner = Boolean(error) && issues.length > 0 && !isEmptyState;
|
||||
|
||||
return (
|
||||
<div className="modal-overlay open" onClick={(e) => e.target === e.currentTarget && onClose()}>
|
||||
<div className="modal">
|
||||
<div className="modal-header">
|
||||
<h3>Import from GitHub</h3>
|
||||
<button className="modal-close" onClick={onClose}>
|
||||
<div className="modal modal-lg github-import-modal">
|
||||
<div className="modal-header github-import-modal__header">
|
||||
<div>
|
||||
<h3>Import from GitHub</h3>
|
||||
<p className="github-import-modal__subtitle">
|
||||
Choose a detected remote, load open issues, and import one into the board.
|
||||
</p>
|
||||
</div>
|
||||
<button className="modal-close" onClick={onClose} aria-label="Close import modal">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
{/* Repository Selection Section */}
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label htmlFor="gh-remote">
|
||||
Repository
|
||||
{loadingRemotes && <Loader2 size={12} className="spin" style={{ marginLeft: 8, display: "inline" }} />}
|
||||
</label>
|
||||
<div className="modal-body github-import-modal__body">
|
||||
<section className="github-import-section" aria-labelledby="github-import-source-heading">
|
||||
<div className="github-import-section__header">
|
||||
<div>
|
||||
<h4 id="github-import-source-heading">Repository source</h4>
|
||||
<p className="github-import-section__helper">
|
||||
kb reads Git remotes from your current repository so you can load issues without typing owner/repo by hand.
|
||||
</p>
|
||||
</div>
|
||||
<div className="github-import-repository-pill" aria-live="polite">
|
||||
<span className="github-import-repository-pill__label">Repository</span>
|
||||
<span className="github-import-repository-pill__value">{repositoryName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading state */}
|
||||
{loadingRemotes && (
|
||||
<span className="text-muted">Loading remotes...</span>
|
||||
)}
|
||||
{loadingRemotes && (
|
||||
<div className="github-import-state github-import-state--loading" role="status" aria-live="polite">
|
||||
<Loader2 size={16} className="spin" />
|
||||
<div>
|
||||
<strong>Detecting Git remotes…</strong>
|
||||
<span>Scanning this worktree for GitHub remotes.</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No remotes */}
|
||||
{!loadingRemotes && !hasRemotes && (
|
||||
<div className="form-error">
|
||||
No GitHub remotes detected. Add a remote with:
|
||||
<code style={{ display: "block", marginTop: 4, padding: 4, background: "#f5f5f5", borderRadius: 4 }}>
|
||||
git remote add origin https://github.com/owner/repo.git
|
||||
</code>
|
||||
{!loadingRemotes && !hasRemotes && (
|
||||
<div className="github-import-state github-import-state--warning" role="alert">
|
||||
<div>
|
||||
<strong>No GitHub remotes detected</strong>
|
||||
<span>Add a GitHub remote to this repository, then reopen the modal.</span>
|
||||
</div>
|
||||
<code className="github-import-command">
|
||||
git remote add origin https://github.com/owner/repo.git
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loadingRemotes && singleRemote && (
|
||||
<div className="github-import-remote-card" data-testid="github-import-single-remote">
|
||||
<div>
|
||||
<div className="github-import-remote-card__eyebrow">Auto-detected remote</div>
|
||||
<div className="github-import-remote-card__title">
|
||||
{remotes[0].name} <span>{remotes[0].owner}/{remotes[0].repo}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="github-import-badge">Ready</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loadingRemotes && multipleRemotes && (
|
||||
<div className="github-import-controls-grid">
|
||||
<div className="form-group github-import-form-group github-import-form-group--remote">
|
||||
<label htmlFor="gh-remote">Repository</label>
|
||||
<select
|
||||
id="gh-remote"
|
||||
value={selectedRemoteName}
|
||||
onChange={(e) => handleRemoteChange(e.target.value)}
|
||||
disabled={loading || importing}
|
||||
>
|
||||
<option value="">Select a remote...</option>
|
||||
{remotes.map((remote) => (
|
||||
<option key={remote.name} value={remote.name}>
|
||||
{remote.name} ({remote.owner}/{remote.repo})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<small>Pick which remote to query when more than one GitHub origin is available.</small>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="github-import-section" aria-labelledby="github-import-filters-heading">
|
||||
<div className="github-import-section__header">
|
||||
<div>
|
||||
<h4 id="github-import-filters-heading">Filters & sync</h4>
|
||||
<p className="github-import-section__helper">
|
||||
Narrow the issue list with labels, then fetch up to 30 open issues from the selected repository.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="github-import-controls-grid">
|
||||
<div className="form-group github-import-form-group">
|
||||
<label htmlFor="gh-labels">Labels (optional)</label>
|
||||
<input
|
||||
id="gh-labels"
|
||||
type="text"
|
||||
placeholder="bug,enhancement"
|
||||
value={labels}
|
||||
onChange={(e) => setLabels(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleLoad()}
|
||||
disabled={loading || importing}
|
||||
/>
|
||||
<small>Use comma-separated labels to filter the GitHub issue query.</small>
|
||||
</div>
|
||||
|
||||
<div className="form-group github-import-form-group github-import-form-group--action">
|
||||
<label htmlFor="gh-load">Load issues</label>
|
||||
<button
|
||||
id="gh-load"
|
||||
className="btn btn-primary github-import-load-button"
|
||||
onClick={handleLoad}
|
||||
disabled={loading || importing || !owner.trim() || !repo.trim()}
|
||||
>
|
||||
{loading ? <Loader2 size={14} className="spin" /> : "Load"}
|
||||
</button>
|
||||
<small>Load issues from the selected repository without changing any board data.</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{showInlineErrorBanner && (
|
||||
<div className="form-error github-import-banner" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="github-import-workspace">
|
||||
<section
|
||||
className="github-import-section github-import-section--results"
|
||||
aria-labelledby="github-import-results-heading"
|
||||
>
|
||||
<div className="github-import-section__header">
|
||||
<div>
|
||||
<h4 id="github-import-results-heading">Results</h4>
|
||||
<p className="github-import-section__helper">
|
||||
Imported issues stay visible but cannot be selected again.
|
||||
</p>
|
||||
</div>
|
||||
{issues.length > 0 && (
|
||||
<div className="github-import-results-meta" aria-live="polite">
|
||||
<span>{issues.length} issue{issues.length === 1 ? "" : "s"}</span>
|
||||
<span>{importedIssueCount} imported</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!hasResultsContent && (
|
||||
<div className="github-import-state github-import-state--idle" data-testid="github-import-results-idle">
|
||||
<div>
|
||||
<strong>Nothing loaded yet</strong>
|
||||
<span>Select a repository and load issues to start reviewing import candidates.</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Single remote - read only display */}
|
||||
{!loadingRemotes && singleRemote && (
|
||||
<span className="text-muted">
|
||||
{remotes[0].name} ({remotes[0].owner}/{remotes[0].repo})
|
||||
</span>
|
||||
{loading && (
|
||||
<div className="github-import-state github-import-state--loading" role="status" aria-live="polite">
|
||||
<Loader2 size={16} className="spin" />
|
||||
<div>
|
||||
<strong>Loading open issues…</strong>
|
||||
<span>Fetching the latest issue list from GitHub.</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Multiple remotes - dropdown */}
|
||||
{!loadingRemotes && multipleRemotes && (
|
||||
<select
|
||||
id="gh-remote"
|
||||
value={selectedRemoteName}
|
||||
onChange={(e) => handleRemoteChange(e.target.value)}
|
||||
disabled={loading || importing}
|
||||
>
|
||||
<option value="">Select a remote...</option>
|
||||
{remotes.map((remote) => (
|
||||
<option key={remote.name} value={remote.name}>
|
||||
{remote.name} ({remote.owner}/{remote.repo})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{isResultsError && (
|
||||
<div className="github-import-state github-import-state--error" role="alert">
|
||||
<div>
|
||||
<strong>Could not load issues</strong>
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="gh-labels">Labels (optional)</label>
|
||||
<input
|
||||
id="gh-labels"
|
||||
type="text"
|
||||
placeholder="bug,enhancement"
|
||||
value={labels}
|
||||
onChange={(e) => setLabels(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleLoad()}
|
||||
disabled={loading || importing}
|
||||
/>
|
||||
</div>
|
||||
{isEmptyState && (
|
||||
<div className="github-import-state github-import-state--empty" role="status">
|
||||
<div>
|
||||
<strong>No open issues found</strong>
|
||||
<span>Try a different label filter or choose another repository.</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-group form-group--action">
|
||||
<label> </label>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleLoad}
|
||||
disabled={loading || importing || !owner.trim() || !repo.trim()}
|
||||
>
|
||||
{loading ? <Loader2 size={14} className="spin" /> : "Load"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Display */}
|
||||
{error && <div className="form-error">{error}</div>}
|
||||
|
||||
{/* Issues List */}
|
||||
{issues.length > 0 && (
|
||||
<>
|
||||
<div className="issues-list">
|
||||
<h4>Found {issues.length} issues:</h4>
|
||||
{issues.map((issue) => {
|
||||
const isImported = importedUrls.has(issue.html_url);
|
||||
return (
|
||||
<div
|
||||
key={issue.number}
|
||||
className={`issue-item ${selectedIssueNumber === issue.number ? "selected" : ""} ${isImported ? "imported" : ""}`}
|
||||
onClick={() => !isImported && setSelectedIssueNumber(issue.number)}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="issue"
|
||||
checked={selectedIssueNumber === issue.number}
|
||||
onChange={() => setSelectedIssueNumber(issue.number)}
|
||||
disabled={isImported}
|
||||
/>
|
||||
<span className="issue-number">#{issue.number}</span>
|
||||
<span className="issue-title">{issue.title}</span>
|
||||
{issue.labels.length > 0 && (
|
||||
<span className="issue-labels">
|
||||
{issue.labels.map((l) => (
|
||||
<span key={l.name} className="label-chip">
|
||||
{l.name}
|
||||
{issues.length > 0 && (
|
||||
<div className="issues-list" aria-live="polite">
|
||||
{issues.map((issue) => {
|
||||
const isImported = importedUrls.has(issue.html_url);
|
||||
return (
|
||||
<div
|
||||
key={issue.number}
|
||||
className={`issue-item ${selectedIssueNumber === issue.number ? "selected" : ""} ${isImported ? "imported" : ""}`}
|
||||
onClick={() => !isImported && setSelectedIssueNumber(issue.number)}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="issue"
|
||||
checked={selectedIssueNumber === issue.number}
|
||||
onChange={() => setSelectedIssueNumber(issue.number)}
|
||||
disabled={isImported}
|
||||
aria-label={`Select issue #${issue.number}`}
|
||||
/>
|
||||
<div className="issue-main">
|
||||
<div className="issue-heading-row">
|
||||
<span className="issue-number">#{issue.number}</span>
|
||||
<span className="issue-title">{issue.title}</span>
|
||||
</div>
|
||||
{issue.labels.length > 0 && (
|
||||
<span className="issue-labels">
|
||||
{issue.labels.map((l) => (
|
||||
<span key={l.name} className="label-chip">
|
||||
{l.name}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
{isImported && <span className="imported-badge">Imported</span>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
)}
|
||||
</div>
|
||||
{isImported && <span className="imported-badge">Imported</span>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section
|
||||
className="github-import-section github-import-section--preview"
|
||||
aria-labelledby="github-import-preview-heading"
|
||||
>
|
||||
<div className="github-import-section__header">
|
||||
<div>
|
||||
<h4 id="github-import-preview-heading">Preview</h4>
|
||||
<p className="github-import-section__helper">
|
||||
Review the selected issue before importing it as a task.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
{selectedIssue && (
|
||||
<div className="issue-preview">
|
||||
<h4>Preview</h4>
|
||||
{selectedIssue ? (
|
||||
<div className="issue-preview" data-testid="github-import-preview-card">
|
||||
<div className="preview-meta">Issue #{selectedIssue.number}</div>
|
||||
<div className="preview-title">{selectedIssue.title}</div>
|
||||
<div className="preview-body">
|
||||
{selectedIssue.body
|
||||
@@ -303,12 +428,19 @@ export function GitHubImportModal({ isOpen, onClose, onImport, tasks }: GitHubIm
|
||||
: "(no description)"}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="github-import-state github-import-state--idle" data-testid="github-import-preview-empty">
|
||||
<div>
|
||||
<strong>No issue selected</strong>
|
||||
<span>Choose an issue from the results list to inspect its title and description.</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-actions">
|
||||
<div className="modal-actions github-import-modal__actions">
|
||||
<button className="btn" onClick={onClose} disabled={importing}>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
||||
import { render, screen, fireEvent, waitFor, within } from "@testing-library/react";
|
||||
import { GitHubImportModal } from "../GitHubImportModal";
|
||||
import { apiFetchGitHubIssues, apiImportGitHubIssue, fetchGitRemotes } from "../../api";
|
||||
import type { Task } from "@kb/core";
|
||||
@@ -44,11 +44,17 @@ describe("GitHubImportModal", () => {
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
vi.mocked(fetchGitRemotes).mockReset();
|
||||
vi.mocked(apiFetchGitHubIssues).mockReset();
|
||||
vi.mocked(apiImportGitHubIssue).mockReset();
|
||||
onClose.mockReset();
|
||||
onImport.mockReset();
|
||||
});
|
||||
|
||||
it("renders when isOpen is true", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce([]);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Import from GitHub")).toBeTruthy();
|
||||
});
|
||||
@@ -59,9 +65,25 @@ describe("GitHubImportModal", () => {
|
||||
expect(screen.queryByText("Import from GitHub")).toBeNull();
|
||||
});
|
||||
|
||||
it("renders semantic sections and idle states before issues are loaded", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("heading", { name: "Repository source" })).toBeTruthy();
|
||||
expect(screen.getByRole("heading", { name: /Filters & sync/i })).toBeTruthy();
|
||||
expect(screen.getByRole("heading", { name: "Results" })).toBeTruthy();
|
||||
expect(screen.getByRole("heading", { name: "Preview" })).toBeTruthy();
|
||||
});
|
||||
|
||||
expect(screen.getByTestId("github-import-results-idle")).toBeTruthy();
|
||||
expect(screen.getByTestId("github-import-preview-empty")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("has optional labels input", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByLabelText(/Labels/)).toBeTruthy();
|
||||
});
|
||||
@@ -71,6 +93,7 @@ describe("GitHubImportModal", () => {
|
||||
it("shows 'No GitHub remotes detected' message", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce([]);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/No GitHub remotes detected/)).toBeTruthy();
|
||||
});
|
||||
@@ -79,6 +102,7 @@ describe("GitHubImportModal", () => {
|
||||
it("disables Load button when no remotes available", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce([]);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const loadButton = screen.getByRole("button", { name: /Load/i }) as HTMLButtonElement;
|
||||
expect(loadButton.disabled).toBe(true);
|
||||
@@ -87,17 +111,23 @@ describe("GitHubImportModal", () => {
|
||||
});
|
||||
|
||||
describe("with single remote", () => {
|
||||
it("auto-selects the remote and shows as read-only text", async () => {
|
||||
it("auto-selects the remote and shows it as a ready card", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/origin \(dustinbyrne\/kb\)/)).toBeTruthy();
|
||||
const remoteCard = screen.getByTestId("github-import-single-remote");
|
||||
expect(within(remoteCard).getByText("Auto-detected remote")).toBeTruthy();
|
||||
expect(within(remoteCard).getByText(/origin/i)).toBeTruthy();
|
||||
expect(within(remoteCard).getByText("dustinbyrne/kb")).toBeTruthy();
|
||||
expect(within(remoteCard).getByText("Ready")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("does not show a dropdown", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole("combobox")).toBeNull();
|
||||
});
|
||||
@@ -106,6 +136,7 @@ describe("GitHubImportModal", () => {
|
||||
it("enables Load button when remote is auto-selected", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const loadButton = screen.getByRole("button", { name: /Load/i }) as HTMLButtonElement;
|
||||
expect(loadButton.disabled).toBe(false);
|
||||
@@ -117,12 +148,12 @@ describe("GitHubImportModal", () => {
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce([]);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/origin \(dustinbyrne\/kb\)/)).toBeTruthy();
|
||||
expect(screen.getByTestId("github-import-single-remote")).toBeTruthy();
|
||||
});
|
||||
|
||||
const loadButton = screen.getByRole("button", { name: /Load/i });
|
||||
fireEvent.click(loadButton);
|
||||
fireEvent.click(screen.getByRole("button", { name: /Load/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(apiFetchGitHubIssues).toHaveBeenCalledWith("dustinbyrne", "kb", 30, undefined);
|
||||
@@ -134,20 +165,19 @@ describe("GitHubImportModal", () => {
|
||||
it("shows a dropdown with all remotes", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(multipleRemotes);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole("combobox");
|
||||
expect(select).toBeTruthy();
|
||||
expect(screen.getByRole("combobox")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("dropdown has placeholder and all remote options", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(multipleRemotes);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole("combobox") as HTMLSelectElement;
|
||||
expect(select).toBeTruthy();
|
||||
// Check options are rendered
|
||||
const options = Array.from(select.options).map(o => o.text);
|
||||
const options = Array.from(select.options).map((option) => option.text);
|
||||
expect(options).toContain("Select a remote...");
|
||||
expect(options).toContain("origin (dustinbyrne/kb)");
|
||||
expect(options).toContain("upstream (upstream/kb)");
|
||||
@@ -157,6 +187,7 @@ describe("GitHubImportModal", () => {
|
||||
it("disables Load button when no remote is selected", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(multipleRemotes);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const loadButton = screen.getByRole("button", { name: /Load/i }) as HTMLButtonElement;
|
||||
expect(loadButton.disabled).toBe(true);
|
||||
@@ -166,12 +197,12 @@ describe("GitHubImportModal", () => {
|
||||
it("enables Load button after selecting a remote", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(multipleRemotes);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("combobox")).toBeTruthy();
|
||||
});
|
||||
|
||||
const select = screen.getByRole("combobox");
|
||||
fireEvent.change(select, { target: { value: "origin" } });
|
||||
fireEvent.change(screen.getByRole("combobox"), { target: { value: "origin" } });
|
||||
|
||||
const loadButton = screen.getByRole("button", { name: /Load/i }) as HTMLButtonElement;
|
||||
expect(loadButton.disabled).toBe(false);
|
||||
@@ -184,11 +215,11 @@ describe("GitHubImportModal", () => {
|
||||
.mockResolvedValueOnce([{ number: 2, title: "Issue from upstream", body: "", html_url: "https://github.com/upstream/kb/issues/2", labels: [] }]);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("combobox")).toBeTruthy();
|
||||
});
|
||||
|
||||
// Select origin and load
|
||||
const select = screen.getByRole("combobox");
|
||||
fireEvent.change(select, { target: { value: "origin" } });
|
||||
fireEvent.click(screen.getByRole("button", { name: /Load/i }));
|
||||
@@ -198,7 +229,6 @@ describe("GitHubImportModal", () => {
|
||||
expect(screen.getByText("Issue from origin")).toBeTruthy();
|
||||
});
|
||||
|
||||
// Switch to upstream and load again
|
||||
fireEvent.change(select, { target: { value: "upstream" } });
|
||||
fireEvent.click(screen.getByRole("button", { name: /Load/i }));
|
||||
|
||||
@@ -219,8 +249,9 @@ describe("GitHubImportModal", () => {
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce(issues);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/origin/)).toBeTruthy();
|
||||
expect(screen.getByTestId("github-import-single-remote")).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Load/i }));
|
||||
@@ -231,7 +262,7 @@ describe("GitHubImportModal", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("selects an issue when clicked", async () => {
|
||||
it("shows the preview empty state before selection and fills it after selecting an issue", async () => {
|
||||
const issues = [
|
||||
{ number: 1, title: "First Issue", body: "Body 1", html_url: "https://github.com/owner/repo/issues/1", labels: [] },
|
||||
];
|
||||
@@ -239,8 +270,9 @@ describe("GitHubImportModal", () => {
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce(issues);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/origin/)).toBeTruthy();
|
||||
expect(screen.getByTestId("github-import-preview-empty")).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Load/i }));
|
||||
@@ -249,10 +281,12 @@ describe("GitHubImportModal", () => {
|
||||
expect(screen.getByText("First Issue")).toBeTruthy();
|
||||
});
|
||||
|
||||
const radio = screen.getByRole("radio") as HTMLInputElement;
|
||||
fireEvent.click(radio);
|
||||
fireEvent.click(screen.getByRole("radio", { name: /Select issue #1/i }));
|
||||
|
||||
expect(radio.checked).toBe(true);
|
||||
const previewCard = await screen.findByTestId("github-import-preview-card");
|
||||
expect(within(previewCard).getByText("First Issue")).toBeTruthy();
|
||||
expect(within(previewCard).getByText("Body 1")).toBeTruthy();
|
||||
expect(screen.queryByTestId("github-import-preview-empty")).toBeNull();
|
||||
});
|
||||
|
||||
it("disables Import button when no issue is selected", async () => {
|
||||
@@ -263,8 +297,9 @@ describe("GitHubImportModal", () => {
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce(issues);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/origin/)).toBeTruthy();
|
||||
expect(screen.getByTestId("github-import-single-remote")).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Load/i }));
|
||||
@@ -285,8 +320,9 @@ describe("GitHubImportModal", () => {
|
||||
vi.mocked(apiImportGitHubIssue).mockResolvedValueOnce(mockTask);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/origin/)).toBeTruthy();
|
||||
expect(screen.getByTestId("github-import-single-remote")).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Load/i }));
|
||||
@@ -295,7 +331,7 @@ describe("GitHubImportModal", () => {
|
||||
expect(screen.getByText("First Issue")).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("radio"));
|
||||
fireEvent.click(screen.getByRole("radio", { name: /Select issue #1/i }));
|
||||
fireEvent.click(screen.getByRole("button", { name: /Import$/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
@@ -317,8 +353,9 @@ describe("GitHubImportModal", () => {
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce(issues);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[existingTask]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/origin/)).toBeTruthy();
|
||||
expect(screen.getByTestId("github-import-single-remote")).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Load/i }));
|
||||
@@ -340,30 +377,51 @@ describe("GitHubImportModal", () => {
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce(issues);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[existingTask]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/origin/)).toBeTruthy();
|
||||
expect(screen.getByTestId("github-import-single-remote")).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Load/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
const radio = screen.getByRole("radio") as HTMLInputElement;
|
||||
const radio = screen.getByRole("radio", { name: /Select issue #1/i }) as HTMLInputElement;
|
||||
expect(radio.disabled).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it("displays error on fetch failure", async () => {
|
||||
it("renders the empty results state when GitHub returns no open issues", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
vi.mocked(apiFetchGitHubIssues).mockRejectedValueOnce(new Error("Repository not found"));
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce([]);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/origin/)).toBeTruthy();
|
||||
expect(screen.getByTestId("github-import-results-idle")).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Load/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("No open issues found")).toBeTruthy();
|
||||
expect(screen.getByText(/Try a different label filter/)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("displays error state on fetch failure", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
vi.mocked(apiFetchGitHubIssues).mockRejectedValueOnce(new Error("Repository not found"));
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId("github-import-single-remote")).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Load/i }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Could not load issues")).toBeTruthy();
|
||||
expect(screen.getByText("Repository not found")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -376,8 +434,9 @@ describe("GitHubImportModal", () => {
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce(issues);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/origin/)).toBeTruthy();
|
||||
expect(screen.getByTestId("github-import-single-remote")).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Load/i }));
|
||||
@@ -393,9 +452,11 @@ describe("GitHubImportModal", () => {
|
||||
it("closes modal on Cancel button click", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce([]);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("button", { name: /Cancel/i })).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Cancel/i }));
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
@@ -403,10 +464,12 @@ describe("GitHubImportModal", () => {
|
||||
it("closes modal on X button click", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce([]);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("×")).toBeTruthy();
|
||||
expect(screen.getByLabelText("Close import modal")).toBeTruthy();
|
||||
});
|
||||
fireEvent.click(screen.getByText("×"));
|
||||
|
||||
fireEvent.click(screen.getByLabelText("Close import modal"));
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2436,100 +2436,351 @@ body {
|
||||
}
|
||||
|
||||
/* === GitHub Import Modal === */
|
||||
.form-row {
|
||||
.github-import-modal {
|
||||
width: min(760px, calc(100vw - (var(--space-xl) * 2)));
|
||||
}
|
||||
|
||||
.github-import-modal__header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.github-import-modal__subtitle {
|
||||
margin-top: var(--space-xs);
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.github-import-modal__body {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg);
|
||||
padding: var(--space-lg) var(--space-xl) var(--space-xl);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row .form-group {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
.github-import-modal__actions {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-row .form-group--action {
|
||||
flex: 0 0 auto;
|
||||
.github-import-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-lg);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 60%), var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.form-row .btn {
|
||||
height: 32px;
|
||||
.github-import-section__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.github-import-section__header h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.github-import-section__helper {
|
||||
margin-top: var(--space-xs);
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.github-import-repository-pill {
|
||||
min-width: 180px;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.github-import-repository-pill__label {
|
||||
display: block;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.github-import-repository-pill__value {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.github-import-controls-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.github-import-form-group {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.github-import-form-group:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.github-import-form-group--remote {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.github-import-form-group--action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.github-import-load-button {
|
||||
min-height: 38px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.github-import-remote-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.github-import-remote-card__eyebrow {
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.github-import-remote-card__title {
|
||||
margin-top: 2px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.github-import-remote-card__title span {
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.github-import-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid var(--color-success);
|
||||
border-radius: var(--radius-lg);
|
||||
color: var(--color-success);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.github-import-command {
|
||||
display: block;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
margin: 12px 0;
|
||||
padding: 8px 12px;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: rgba(248, 81, 73, 0.1);
|
||||
border: 1px solid var(--color-error);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-error);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.github-import-banner {
|
||||
margin: calc(var(--space-md) * -0.25) 0 0;
|
||||
}
|
||||
|
||||
.github-import-workspace {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.95fr);
|
||||
gap: var(--space-lg);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.github-import-section--results,
|
||||
.github-import-section--preview {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.github-import-results-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-sm);
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.github-import-results-meta span {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.github-import-state {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.github-import-state strong {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.github-import-state span {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.github-import-state--loading {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.github-import-state--warning {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.github-import-state--error {
|
||||
border-style: solid;
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
.github-import-state--error strong {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.github-import-state--empty,
|
||||
.github-import-state--idle {
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.issues-list {
|
||||
margin-top: 16px;
|
||||
max-height: 240px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.issues-list h4 {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.issue-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
border-bottom: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
transition:
|
||||
background var(--transition-fast),
|
||||
border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.issue-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.issue-item input[type="radio"] {
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.issue-item:hover:not(.imported) {
|
||||
background: var(--card-hover);
|
||||
}
|
||||
|
||||
.issue-item.selected {
|
||||
background: rgba(88, 166, 255, 0.1);
|
||||
background: rgba(var(--in-progress-rgb), 0.12);
|
||||
box-shadow: inset 0 0 0 1px rgba(var(--in-progress-rgb), 0.35);
|
||||
}
|
||||
|
||||
.issue-item.imported {
|
||||
opacity: 0.6;
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.issue-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.issue-heading-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-sm);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.issue-number {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
min-width: 40px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.issue-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.issue-labels {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.label-chip {
|
||||
padding: 2px 6px;
|
||||
padding: 3px 8px;
|
||||
font-size: 11px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
@@ -2538,38 +2789,98 @@ body {
|
||||
}
|
||||
|
||||
.imported-badge {
|
||||
padding: 2px 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
background: rgba(63, 185, 80, 0.2);
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--color-success);
|
||||
border-radius: var(--radius-lg);
|
||||
color: var(--color-success);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.issue-preview {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
background: var(--card);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-lg);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.issue-preview h4 {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
.preview-meta {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.preview-body {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.github-import-modal {
|
||||
width: calc(100vw - (var(--space-lg) * 2));
|
||||
}
|
||||
|
||||
.github-import-workspace {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.github-import-modal__body {
|
||||
padding: var(--space-md);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.github-import-section {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.github-import-section__header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.github-import-repository-pill {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.github-import-controls-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.github-import-results-meta {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.issue-item {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.imported-badge {
|
||||
align-self: flex-start;
|
||||
margin-left: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
||||
Reference in New Issue
Block a user